Databases
StackOverflow2013
Postsdbo
POHow to clone a table row with a datepicker, using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to clone a table row with a datepicker, using jQuery
    text
    copied!<p>I am having a similar problem. I am able to clone the row and the datepicker works for the focus event, but the button always points back to the initial row that was cloned. I have tried the ".removeClass('hasDatepicker')" and that is what enabled the datepicker to be cloned at all. Does anyone know why the button is still not working?</p> <p>Here is my code:</p> <pre><code>$(document).ready(function () { $(function () { $('#addNew').click(function () { var tbody = $('#entries tbody'); var rows = tbody.find('tr').length; var newRow = tbody.find('tr:first').clone(true).appendTo(tbody); newRow.find(':input').val('').each(function () { var id = this.id if (id) { this.id = this.id.split('_')[0] + '_' + rows; } }).end().find('.datepicker').removeClass('hasDatepicker').datepicker(); }); $('.datepicker').datepicker({ autoSize: true, changeMonth: true, changeYear: true, gotoCurrent: true, showOn: 'both', buttonImage: '@Url.Content("~/Content/calendar.png")', buttonText: 'Choose Treatment Date', NextText: 'Next', prevText: 'Previous', showButtonPanel: true }); }); }); &lt;fieldset&gt; &lt;h4&gt;Procedures&lt;/h4&gt; &lt;table id="entries" border="1"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; Date of Service &lt;br /&gt; &lt;input type="text" id="DateOfService" class="datepicker" /&gt; &lt;/td&gt; &lt;td&gt; Procedure Code &lt;br /&gt; &lt;input type="text" id="ProcedureCode" /&gt; &lt;br /&gt; &lt;a href="#" id="procedureLookup"&gt;Lookup&lt;/a&gt; &lt;/td&gt; &lt;td&gt; Description &lt;br /&gt; &lt;input type="text" id="ProcedureCodeDescription" /&gt; &lt;/td&gt; &lt;td&gt; &lt;div id="hasToothAndSurface"&gt; Tooth &lt;br /&gt; &lt;input type="text" id="Tooth" /&gt; &lt;br /&gt; Surface &lt;br /&gt; &lt;input type="text" id="Surface"/&gt; &lt;/div&gt; &lt;div id="NoToothSurface" style="display:none"&gt; &lt;label for="txtNoToothSurface"&gt;Tooth/Surface&lt;/label&gt; N/A &lt;/div&gt; &lt;br /&gt; &lt;a href="#" id="toothSurfaceLookup"&gt;Lookup&lt;/a&gt; &lt;/td&gt; &lt;td&gt; Fee $ &lt;br /&gt; &lt;input type="text" id="ProcedureFee" /&gt; &lt;/td&gt; &lt;td&gt;&lt;button type="button" id="deleteRow" class="remove"&gt;Remove&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;button type="button" id="addNew"&gt;Add Procedure&lt;/button&gt; &lt;/fieldset&gt; </code></pre> <p>I am open to any suggestions. I need the user to be able to add n-many records and then post them to my asp.net controller so that I can process them. I was thinking of changing the names of the input to things like:</p> <pre><code>&lt;input type="text" name="in_dateofService[]" /&gt; &lt;input type="text" name="in_code[]" class="my_date" /&gt; &lt;input type="text" name="in_tooth[]" /&gt; &lt;input type="text" name="in_surface[]" /&gt; &lt;input type="text" name="in_fee[]" /&gt; </code></pre> <p>As it looks like I could then process them as arrays on the post. Is that correct?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload