CODEWITHSUNDEEP
c#asp.netjqueryhtml
þÍńķ
þÍńķ

Reputation: 363

How to get Dynamic Span id in jquery?

Iam using jquery in asp.net

I have one user control in which i have div and in div table and in table tr and in tr td and in td i have lables.

ASCX :

          <div  ID="Container" runat="server" class="dvContainer">
<table ID="Table" class = "Tablecs">
    <thead><tr>
        <td colspan="2">
            <asp:Label ID="lbl1" Text="Swiss" runat="server" /></td>
    </tr>
        </thead>
    <tr>
        <td>ABC</td>
        <td>DEF</td>
    </tr>
    <tr>
        <td><asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" /></td>
        <td ><asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" /></td>
    </tr>
        <tr>
        <td><asp:Label ID="lblAA" Text="SUN 12/21 05:04" runat="server" /></td>
        <td ><asp:Label ID="lblAD" Text="SUN 12/21 19:00" runat="server" /></td>
    </tr>
</table>

i want to bind data dynamically to these user control. i.e., binding data to lables in user contol.

my Jquery

            $div.find(".Table").text(oPorts[iCount].Name); // my result is an array of oPorts and i have filed as Name

But this is not working fine. when i checked into code dynamically its generating SPAN for each and every lable How to find that SPAN id dynamiccaly in a loop and bind data to lables??

Any help is appreciated. Thanks in Advance.

Upvotes: 0

Views: 1404

Answers (1)

Manish Mishra
Manish Mishra

Reputation: 12375

suppose you have a usercontrol with a markup like given below

<%@ Control Language="C#" AutoEventWireup="true" 
 CodeBehind="WebUserControl1.ascx.cs" Inherits="DOTNET_FORMS.WebUserControl1" %>

<div id="Container" runat="server" class="dvContainer">
    <table id="Table" class="Tablecs">
        <tr>
            <td>
                <asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" />
            </td>
            <td>
                <asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" />
            </td>
        </tr>
    </table>
</div>

and you have registered this usercontrol on your .aspx page like this:

<%@ Register TagPrefix="UC" TagName="Test" Src="~/WebUserControl1.ascx" %>

and used it like this:

<UC:Test ID="uc1" runat="server" />

then, when you run your page, your elements get rendered something like

<div id="uc1_Container" class="dvContainer">
    <table id="Table" class="Tablecs">
        <tr>
            <td>
                <span id="uc1_lblPA">SUN 12/21 05:04</span>
            </td>
            <td>
                <span id="uc1_lblPD">SUN 12/21 19:00</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="uc1_lblAA">SUN 12/21 05:04</span>
            </td>
            <td>
                <span id="uc1_lblAD">SUN 12/21 19:00</span>
            </td>
        </tr>
    </table>
</div>

see how ids of your labels and other elements (elements with runat="server" attribute ) got changed i.e. 

lblPA > uc1_lblPA
lblPD > uc1_lblPD

Container > uc1_Container

so, you have to look out for these changes, because only then you can grab these elements using jQuery, cause jQuery is a client side language, it executes, after the server side code (runat="server") has executed.

However, if you do not want to look out for modified id, you can do following

  1. remove runat="server" attribute, and make sure your ids are unique, all of them
  2. let the runat="server" attribute be their, place an attribute clientidmode="static" on all of your server side controls. and Ids wont change.
  3. use ClientId i.e. in your jQuery selector, grab an element like this: $('#"+'<%= lblPA.ClientID %>');

now, since your IDs are unique, you don't need to find, directly grab the elements like this:

$('#lblPA').text();

or if you want to loop through all the tds of your table with class Tablecs, do this:

$('.Tablecs tr td').each(function(index, item){
             alert($(item).text());
});

Upvotes: 1

Related Questions