We help IT Professionals succeed at work.

Datepicker not working for html table rows except first row

puneet kumar
puneet kumar asked
on
i have create a grid view where 3 date columns are there . when i fetch the data from database
shown in that grid date is coming but along date picker is there with every 3 fields when i m running that only first row
showing date picker not rest of them please tell me the solution

<table align=center>

<tr>			<th>Check/UnCheck</th>
                <th>MYear</th>
                <th>Date1</th>
                <th>Date2</th>
                <!-- <th>Bank Value Date</th> -->
</tr>
<%for(int i=0 ; i<mYearVector.size();i++)
{
	
%>
 <tr>
<td align="top">
<INPUT class="chkValues" id="ckbCheckAll" name="chkBox" type="checkbox" value="<%=(String)newValues.elementAt(0)+","%><%=(String)newValues.elementAt(1)+","%><%=(String)newValues.elementAt(2)%>" size="50">
</td>
<td align="left">
<input class=inputText type="text" name="mYear" id="mYear"  value="<%=mYearVector.elementAt(i)%>"  readonly>
</td>

<td>

			<input type=text class=inputText readonly name=payrollCutOffDate id=payrollCutOffDate value="<%=(oldValues.elementAt(0)==null?"":oldValues.elementAt(0))%>">
			<input  type=button value="<%=messages.getLocalizedString("Date1")%>" class=buttonstyle 
					onmouseover="onMouseOver(this)"
					onmouseout="onMouseOut(this)" 
					onclick="javascript:show_calendar('Date1');"/> 
			
</td>


<td>
			
			<input type=text class=inputText readonly name=payrollPaymentDate id=payrollPaymentDate value="<%=(oldValues.elementAt(1)==null?"":oldValues.elementAt(1))%>">
			<input  type=button value="<%=messages.getLocalizedString("Date2")%>" class=buttonstyle 
					onmouseover="onMouseOver(this)"
					onmouseout="onMouseOut(this)" 
					onclick="javascript:show_calendar('Date2');"/> 
			
</td>

</tr> 
<%}%>

</table>

Open in new window

Comment
Watch Question

Scott FellDeveloper & EE Moderator
SILVER EXPERT
Fellow
Most Valuable Expert 2013

Commented:
It may be easier to solve if you can render your html and post it or post a link to your page making sure to take time to not include any private data. The issue is more than likely going to be a front end JS issue, that is why we need the rendered code or even better a link to your page.

Sometimes these things do not work because you are trying to listen for an id instead of a class name. If you are listening for a class name, there is probably a js error. You can also run the code on your server yourself, hit the f12 key to get to dev tools and check the console for errors.

Author

Commented:
please can you provide me some code snippet by using my code . it will be very helpful for me .
Scott FellDeveloper & EE Moderator
SILVER EXPERT
Fellow
Most Valuable Expert 2013

Commented:
What you will need to do is render your code (run the page, copy and paste the html) in a format I can easily use it elsewhere to try it out. The best option is for you to take the time to set up a test page with fake data and provide a link.  The reason is this is a front end issue and not a back end. There is no way to easily see the issue unless the page is being viewed live or you can recreate it in something like code pen https://codepen.io/, jsfiddle https://jsfiddle.net/ or jsbin https://jsbin.com/.  

Once you have this working on the front end, you can figure out what you need to do on the back end to output what works.

I hope that makes better sense.  Your other option is to run the code on your own, hit the f12 key to see the developer tools and look at the console tab for errors.  Like I said, it is very possible you are rendering duplicate id's like
<div id="foo">Content one</div>
<div id="foo">Content two</div>

Open in new window

If you run the code through a validator like https://validator.w3.org/ you will see an error.  You can only have one unique id. This is a common error that can break your js code.

Author

Commented:
Hi Scott

Please take a dummy data as below -

https://jsfiddle.net/fevy61w8/1/

here i want each and every column date will come and when i select it replace the
old date of particular column.

one more thing here one add function is there which add the row
but in my scenario no add function when i call the page it will
take the data from database and create a grid.so please ignore
this add function .
Scott FellDeveloper & EE Moderator
SILVER EXPERT
Fellow
Most Valuable Expert 2013

Commented:
From my last comment, I guessed right.  I said "it is very possible you are rendering duplicate id's like
<div id="foo">Content one</div>
<div id="foo">Content two</div>

Open in new window


This is what you have except it looks like
<input class="date1" id="dob" name="dob" type="text" value="" />
<input class="date2" id="dob" name="dob" type="text" value="" />
<input class="date3" id="dob" name="dob" type="text" value="" />

Open in new window

What you should have instead is
<input class="date" id="dob1" name="dob" type="text" value="" />
<input class="date" id="dob2" name="dob" type="text" value="" />
<input class="date" id="dob3" name="dob" type="text" value="" />

Open in new window


Then your datepicker is called only on the class one time
https://jsfiddle.net/mL7dj9n2/1/
<table  id="phone" width="100%" name="phone">
		    <tr>
			    <td colspan="5" bgcolor="#5C85B3">Phone</td>
			</tr>
			<tr>
				<th>Date1</td>
				<th>Date2</th>
				<th>Date3</th>
			</tr>
			<tr>
				<td>
		            <input class="date" id="dob1" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date" id="dob2" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date" id="dob3" name="dob" type="text" value="" />
				</td>
			</tr>
      
      </tr>
			<tr>
				<td>
		            <input class="date" id="dob4" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date" id="dob5" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date" id="dob6" name="dob" type="text" value="" />
				</td>
			</tr>
      
      </tr>
			<tr>
				<td>
		            <input class="date" id="dob7" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date" id="dob8" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date" id="dob9" name="dob" type="text" value="" />
				</td>
			</tr>
      
		</table>

$(document).ready(function(){
  
			    $(".date").datepicker();
         
			});

Open in new window

Author

Commented:
Requirement.pngHi Scott my requirement is something like attached image . if id is dynamically generated  then how can i take those values to servlet while submitting the  data . please refer the attached image.
Requirement.png
Scott FellDeveloper & EE Moderator
SILVER EXPERT
Fellow
Most Valuable Expert 2013

Commented:
I was really just trying to help you get the date picker to work. The changes showed will do that.

If you are wanting to post data when the checkbox is ticked, treat that separately. You can do an onChange or onClick for the checkbox and inside of that function submit an ajax request.

Author

Commented:
can you please send me some code snippet to do above one it will be very helpful for me thanx in advance.recently i raised one question regarding this having subject "want to send dynamically created data to servlet while checkbox is cheeked" please tell me there it will be very helpful for me .
Developer & EE Moderator
SILVER EXPERT
Fellow
Most Valuable Expert 2013
Commented:
You have this part working.  I answered in your new question https://www.experts-exchange.com/questions/29168675/want-to-send-dynamically-created-data-to-servlet-while-checkbox-is-cheeked.html since this one is just to get the date picker working.

Author

Commented:
Thank You for your support.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.