Anup Das Gupta's blog: April 2012

Tuesday, April 3, 2012

Search and highlight using jQuery

In this post we will quickly see the search and highlight functionality using jQuery. For this we are taking a textbox and a table with two columns. Each column contains some dummy numbers. Goal is, while typing a number in the textbox, we will highlight the containing cell values of the table. Implementation is very simple. We are doing the following steps for this-

Add a CSS class called highlight with some CSS in it for highlighting.
Implement the keyup event for the textbox.
In the keyup get the value of the text box.
Remove any existing highlight class attached to table cell.
Get matching cells of the table cell containing the value of the textbox.
Add highlight class to the matching cells.

Complete source code goes here-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style>
    .highlight{background-color:Yellow}
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#BtnFindMobile").click(function () {
                value = $("#txtSearchMobile").val();
                $("#table td").removeClass("highlight");
                $("#table td:contains(" + value + ")").addClass("highlight");
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="txtSearchMobile" runat="server"></asp:TextBox>
    <table id="table">
    <tr><td>578563495</td><td>5785642345</td></tr>
    <tr><td>5436436</td><td>875768</td></tr>
    <tr><td>578563495</td><td>789789</td></tr>
    <tr><td>578563495</td><td>0789078907890</td></tr>
    <tr><td>5235</td><td>5345345</td></tr>
    <tr><td>57864634563495</td><td>687687687</td></tr>
    <tr><td>77457567</td><td>68763876767</td></tr>
    <tr><td>768768</td><td>5785687687645</td></tr>
    <tr><td>8997896</td><td>68767367687</td></tr>
    <tr><td>80</td><td>358787965423</td></tr>
    <tr><td>64563456</td><td>7474574</td></tr>
    <tr><td>7567456</td><td>5785642345</td></tr>
    <tr><td>7845745746</td><td>9769</td></tr>
    <tr><td>775567574579</td><td>976967979</td></tr>
    </table>
    </form>
</body>
</html>

Monday, April 2, 2012

Dynamic database driven jQuery Tabs in asp.net

In this post we will go through database driven, dynamic jQuery Tabs implementation. To start with lets first check how the tabs HTML looks like.

The basic structure of the HTML that is needed for Tabs implementation looks like this-

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Now to implement a data base driven or a dynamic tab, we need to find some repeated sequences of content. If we analyze the HTML structure above, we can see two repeated sequences. First is the UL LI with anchor. Each LI is nothing but a repeat of the other. Only difference is the content of the anchor and the href. Secondly, the repeated sequence is the divs below UL. Only difference is the id and content of the div. So, here is another repeated sequence. So to make dynamic or database driven Tabs we, need to make the tow sets of repetitions.

Now here is a implementation using asp.net repeater control-

http://forums.asp.net/p/1693184/4474572.aspx/1?Re+how+to+interact+this+jquery+with+asp+net+codes+

In this link I am little lazy to write the database code. So I have taken the help of in memory datasource. This can be easily changed and the content can be made database driven and its left up to you. If you notice, the connection between the tab item and the content item is done through ListID. In the anchor href we have the following code href="#fragment-<%#Eval("ListID") %>". And in the div id we have id="fragment-<%#Eval("ListID") %>".

We can see another post below-

http://forums.asp.net/p/1663415/4345867.aspx/1?Re+Tabs+creation+using+Jquery+at+runtime

In this post I have created using jQuery and an array rendered to the page using ClientScript.RegisterClientScriptBlock. This also we can make database driven. We can also get the content of the Tabs using jQuery ajax and asp.net pagemethod or webmethod.

Anup Das Gupta's blog

Monday, April 30, 2012

HTML 5 Demos, Presentations, Videos and Examples

Tuesday, April 3, 2012

Search and highlight using jQuery

Monday, April 2, 2012

Dynamic database driven jQuery Tabs in asp.net