Avatar of puneet kumar
puneet kumar
 asked on

Datepicker not working for html table rows except first row

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

JavaScriptjQuery

Avatar of undefined
Last Comment
puneet kumar

8/22/2022 - Mon
Scott Fell

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.
puneet kumar

ASKER
please can you provide me some code snippet by using my code . it will be very helpful for me .
Scott Fell

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
puneet kumar

ASKER
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 Fell

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

puneet kumar

ASKER
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
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Scott Fell

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.
puneet kumar

ASKER
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 .
ASKER CERTIFIED SOLUTION
Scott Fell

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
puneet kumar

ASKER
Thank You for your support.
Your help has saved me hundreds of hours of internet surfing.
fblack61