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
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>
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.
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.
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
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>
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 .
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 .
From my last comment, I guessed right. I said "it is very possible you are rendering duplicate id's like
This is what you have except it looks like
Then your datepicker is called only on the class one time
https://jsfiddle.net/mL7dj9n2/1/
<div id="foo">Content one</div>
<div id="foo">Content two</div>
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="" />
<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="" />
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();
});
Hi 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
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.
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.
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 .
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.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial