Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You need to do a couple of things. First, detach the datepicker fields before cloning the row (i.e. inside the click handler). Then re-initialize them after cloning the row. Right now you're only initializing the first one in the ready() handler when the page first loads, but the newly-cloned row needs to be initialized also.</p> <p>I think the datepicker objects need to be detached before cloning because otherwise when you try to initialize the newly-cloned row, the plugin thinks it's already been initialized and aborts. Also, you'll sometimes end up with multiple buttons or images next to the datepicker input fields if you don't detach them first.</p> <pre><code>$(document).ready(function () { $('#addNew').click(function () { // Detach all datepickers before cloning. $('.datepicker').datepicker('destroy'); 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; } }) // Reattach all datepickers after cloning. $('.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 }); }); // Initial datepicker setup on page load. $('.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 }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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