How to get clientID of Datalist control using jquery

Question

How to get clientID of Datalist control using jquery , I tried using the code below with no succes:

$(document).ready(function(){
$('#<%=txtRenewalDate.ClientID %>').datepicker();
    $('#<%=txtCallBackDate.ClientID %>').datepicker();

});
<asp:DataList ID="dlCustomers" runat="server" ClientIDMode="Predictable">
    <ItemTemplate>
      <table border="0">
                    <tr>
                        <td class="">
                            RenewalDate:
                        </td>
                        <td class="">
                            <asp:TextBox ID="txtRenewalDate" runat="server" Text='<%# Eval("RenewalDate") %>' ClientIDMode="Static"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="">
                            Callback
                        </td>
                        <td class="">
                            <asp:TextBox ID="txtCallBackDate" runat="server" Text='<%# Eval("Callback") %>' ClientIDMode="Static"></asp:TextBox>
                        </td>
                    </tr></table>
                     </ItemTemplate>
</asp:DataList>

Markup when script is commented

                        <td class="">

                            RenewalDate:

                        </td>

                        <td class="">

                            <input name="ctl00$MainContent$dlCustomers$ctl00$txtRenewalDate" type="text" value="27/01/2012 00:00:00" id="txtRenewalDate" />

                        </td>

                    </tr>

                    <tr>

                        <td class="">

                            Callback

                        </td>

                        <td class="">

                            <input name="ctl00$MainContent$dlCustomers$ctl00$txtCallBackDate" type="text" value="27/01/2012 00:00:00" id="txtCallBackDate" />

                        </td>

                    </tr>

I get the following errors when i run : The name 'txtRenewalDate' does not exist in the current context The name 'txtCallBackDate' does not exist in the current context

Any ideas where i am getting it wrong .

Thanks

Answer 1

I think that the issue may be that since those controls are within the datalist and you are calling them from outside of the datalist they technically do not exist at the root of the form. You may need to do something like this:

 $('#<%= dlCustomers.FindControl("txtRenewalDate").ClientID %>')

I may be wrong but that is my best guess.

Answer 2

Is that the full/actual page source? Or do you actually have that script up in the head section? If you have that in the head section, I beleive you need to add runat="server" to your head tag.. there are some issues with running in-line code outside of the main form tag.

Answer 3

if your using asp.net 4, then you can set client ID mode to static, it is more easier than finding the client id in DOM asp.net 4.0 clientID modes

Answer 4

You can select the control in jquery using the expression $('<%= "#" + control.ClientID %>').

Hope this helps.

Answer 5

In order to select this element, you should use something like this:

var txtRen = $('#<%= dlCustomers.ClientID %>').Find('[id$=txtRenewalDate]');