Click here to Skip to main content
15,892,161 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
how to get the id of a textbox within the nested repeater into a jquery.

Here is the jquery:
<script type="text/javascript">
        var e = jQuery.noConflict();
        e(document).ready(function () {
            e("#<%= datepicker.ClientID %>, #datepicker").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>


<asp:Repeater runat="server" ID="rpfollowup">
                <ItemTemplate>

//some txtboxes
 <asp:Repeater runat="server" ID="rpactivity" OnItemDataBound="rpactivity_ItemDataBound" >
                <ItemTemplate>

  <tr>
            
              <td > <asp:TextBox  ID="Activities" runat="server" CssClass="span10"   Text='<%#Eval("Activity")%>'></asp:TextBox></td>
            <td > <asp:TextBox  ID="datepicker" runat="server" CssClass="span10" ClientIDMode="Static"  Text='<%#Eval("Start_Date")%>'></asp:TextBox></td>
              </ItemTemplate></asp:Repeater>
 </ItemTemplate></asp:Repeater>


i have reduced the code to avoid confusion.
Posted
Updated 8-Jun-17 21:05pm
Comments
Pradip R 26-Nov-14 8:56am    
Do you want to initialize that datepicker control over that textbox, right?

By looking at your comment,
You can iterate through jQuery for each repeater date picker input, refer below code:

ASP.NET
<div class="wrapper">
<asp:repeater runat="server" id="rpfollowup" xmlns:asp="#unknown">
...
Your ItemTemplate Snippet
...
</asp:repeater>
</div>


I have added div with class
HTML
wrapper
to your repeater. Now I will iterate inside that wrapper div to find our datepicker input control and one by one initialize them with datepicker plugin with their related IDs.

JavaScript
$(".wrapper input[id$=datepicker]").each(function(index) {
   // You can directly get ID here as well 
   var controlID = $(this).attr('id');
   
   $(this).datepicker({ // If you dont want to specify this, you can use # + controlID
     changeMonth: true,
     changeYear: true
   })
});


I hope you understand!
 
Share this answer
 
Comments
Divya Aq 27-Nov-14 2:35am    
Hello pradip, this is a brilliant support. it must have worked but i am facing the same trouble. i guess the repeater inside the repeater is creating problem.
Pradip R 27-Nov-14 2:50am    
Yes you need to find the same for that sub-control and then the iteration, Can you post your rendered HTML so that it will be very easy for me to iterate and help you.
Give your textbox a class
ASP.NET
<asp:TextBox ID="datepicker" runat="server" CssClass="span10 datepicker" ClientIDMode="Static" Text='<%#Eval("Start_Date")%>'></asp:TextBox>

Script would be:
JavaScript
var e = jQuery.noConflict();
e(document).ready(function () {
  e(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true
  });
});


OR

If you are trying to initialize the textbox with ID, the script would be:

JavaScript
var e = jQuery.noConflict();
e(document).ready(function () {
  e('input[id$=datepicker]').datepicker({
    changeMonth: true,
    changeYear: true
  });
});


Note that the ID of textbox will be as it is.
 
Share this answer
 
Comments
Divya Aq 27-Nov-14 1:01am    
Thanks Pradip, But still, when i add calendar date to the textbox of 2nd item of the repeater, the value sits on the textbox of the first item. note that the textbox is inside nested repeater
try like this to find thye TextboxControl Id
C#
$(this).find('input[id$=datepicker]').datepicker({
     changeMonth: true,
     changeYear: true
});


or give a class name to the textbox control inside repeater..

C#
$(this).find(".className").datepicker();
 
Share this answer
 
Check below solution even I had same problem:

Your Texbox Should be :
ASP.NET
asp:TextBox ID="datepicker" runat="server" CssClass="span10 date-picker" ClientIDMode="Static" Text='<%#Eval("Start_Date")%>'></asp:TextBox>


And you jQuery Code Should be :
JavaScript
$(function () {
 $('.date-picker').each(function (i, obj) {
            var date = obj.defaultValue;
            $(obj).removeClass('hasDatepicker').attr("id", "").datepicker();
            $(obj).datepicker('setDate', date);
        });
 });
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900