Issue with the dynamic generated textbox

[ksrkon]

Hi, I just tried this example with the dynamic generated text box.

I have a page with 3 rows. Each row has one text box which is dynamically generated. When I select hour or mins in fist row text box, its working fine. But if i tried to select the hours and mins from any one of the second or third row text box, it is always updating time on the first text box only.

Here is my code:

<script type="text/javascript"> $(document).ready(function() { $('input[class="timecss"]').timepicker({ hours: { starts: 0, ends: 24 }, minutes: { interval: 5 }, rows: 4, showPeriodLabels: true, minuteText: 'Min' }) }); </script>

[fgelinas]

I feel that your textbox are generated (cloned) after the script to attach the timepicker is run. This is known to cause instance and binding problem. I see 2 easy solutions.
1 - You use IDs for your textboxes and bind the timepicker to each textbox after it is created, this gives the most control.
2 - You initialize the timepicker after the 3 instances are created.

[ksrkon]

Thanks for your reply.

I can't use the different ids for all of my three text boxes. Because i have to define only one text box with one id only. In my JSP struts display tag iterates the data and generated 3 text boxes in rows. If i open the source i can see all the three text boxes in three row in a table with same ID only.

I am elaborating the code little bit more here.

Jsp

<display:table uid="data" name="list">
<display:column title="Time" media="html">
<s:textfield name="time" id="timeid" value="" cssClass="timecss" title="Time" />
</display:column>
</display:table>

<script type="text/javascript"> $(document).ready(function() { $('input[class="timecss"]').timepicker({ hours: { starts: 0, ends: 24 }, minutes: { interval: 5 }, rows: 4, showPeriodLabels: true, minuteText: 'Min' }) }); </script>

Here display tag generates the three rows of display column as per the size of the list(list size specified from the java class) specified as a name attribute in display tag above.

I am initializing the time picker after the text boxes instances are generated.

Here is the source of my jsp page in the browser.

<script type="text/javascript" src="/newtimepicker/include/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/newtimepicker/include/ui-1.10.0/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/newtimepicker/include/ui-1.10.0/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/newtimepicker/include/ui-1.10.0/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="/newtimepicker/include/ui-1.10.0/jquery.ui.position.min.js"></script>

<script type="text/javascript" src="/newtimepicker/jquery.ui.timepicker.js?v=0.3.3"></script>

<style type="text/css"> /* some styling for the page */ body { font-size: 10px; /* for the widget natural size */ } #content { font-size: 1.2em; /* for the rest of the page to show at a normal size */ font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; width: 950px; margin: auto; } .code { margin: 6px; padding: 9px; background-color: #fdf5ce; border: 1px solid #c77405; } fieldset { padding: 0.5em 2em } hr { margin: 0.5em 0; clear: both } a { cursor: pointer; } #requirements li { line-height: 1.6em; } </style>

<style type="text/css">

.ui-timepicker-table td a {
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
}
</style>

<script type="text/javascript"> $(document).ready(function() { $('input[class="estimechangeinput"]').timepicker({ hours: { starts: 0, ends: 24 }, minutes: { interval: 5 }, rows: 4, showPeriodLabels: true, minuteText: 'Min' }) }); </script>