How Do I Pass The Value Of A Repeater Item To A Jquery?

Question

2.00/5 (1 vote)

See more:

Hi,

i am trying to use a datepicker within a nested repeater. but everytime i try to change the date in the 2nd or 3rd item of the repeater by clicking the textbox, a calendar appears as expected. But the value I select is displayed in the 1st item of the repeater.

Here is the javascript:

XML

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

Here is my aspx code:

<asp:Repeater runat="server" ID="rpfollowup">
                <ItemTemplate>
               
<div class="widget-body">
			
						
                                  <!-- Group -->
                              <div class="control-group">

<table border="0" width="100%">
  <tr>
    
    <td align="right"><label class="control-label" style="width:auto; float:none;">  مخرج:</label></td>
      <td align="right" width="75%"><asp:TextBox runat="server" ID="txtOut" Text='<%#Eval("Output")%>'></asp:TextBox></td>
  
    
    </tr>
    
           <tr>
     <td align="right"><asp:TextBox runat="server" ID="ffid" Visible="false" Text='<%#Eval("id")%>'></asp:TextBox></td></tr>

 
</table>
                  <div class="row-fluid">              
                                     <asp:Repeater runat="server" ID="rpactivity" >
                <ItemTemplate>
                                  <table width="100%" border="0" cellpadding="0" cellspacing="0">

        <thead>
	<tr>
                            <th style="font-weight:bold" width="150" height="40" >الأنشطة </th>

                        <th style="font-weight:bold" width="150" height="40" >تاريخ البدء</th>
	</tr>
</thead>
        <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>
 
        </tr>  
   
    </table>  </ItemTemplate></asp:Repeater>
   

						  </div></div>  
								
                                
				
				</div>

                
                 </ItemTemplate>
                </asp:Repeater>

how can i pass the value of the textbox(datepicker) within the nested repeater to the jquery and how do i have to change my jquery? Thanks in advance

Posted 25-Nov-14 20:01pm

Divya Aq

Updated 25-Nov-14 20:03pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sinisa Hajnal · Answer 1 · 2014-11-25T20:47:00

Solution 1

The problem is that you're having multiple identical IDs - use class instead and change ID based on row number or some other criteria so that each row has unique calendarID. You can do this server side in OnDataBound event.

Add the class .datepicker-repeater to item template.

XML

e(document).ready(function () {
        e(".datepicker-repeater").datepicker({
            changeMonth: true,
            changeYear: true
        });

If this helps please take time to accept the solution. Thank you.

Posted 25-Nov-14 20:47pm

Sinisa Hajnal

Updated 26-Nov-14 2:33am

v2

Comments

Divya Aq 26-Nov-14 3:42am

Hi sinisa,

Thank You for the answer.

ID can be changed in the OnDataBound event. But how use the jquery on that ID?
Could you please help me with a sample code.

Thank You

Divya Aq 26-Nov-14 3:50am

i mean, how to pass the ID of the datepicker textbox of the repeater to jquery?

Sinisa Hajnal 26-Nov-14 7:07am

Use "this" keyword. It should reference current object which is that particular textbox. Right?

Divya Aq 26-Nov-14 7:57am

yes, but could you please reframe the jquery for me? i am a little weak with jquery.

Sinisa Hajnal 26-Nov-14 8:34am

You have to change only the selector, see updated solution. So add class to the template and call datepicker on the class instead of id.

If this doesn't work, you'll have to use select event on the calendar to set the value correctly.