Question

I am using jquery datepicker in a quote building page.
The page duplicates a hidden table row every time you click to add a row.

Unfortunatelly for the 3rd and subsequent rows when you use the datepicker (which appears fiine) the date is entered into the second row not the row selected.

Using firebug I’ve determined that the date field input for each subsequent row is being given the same id as the second row. This is because the template row that is cloned for each ‘added row’ is already present when I load the page.

Has anyone got any pointers as to how I can get around this problem.

Jquery:

$(document).ready(function(){
    refreshDatepickers();
    $('#additem').click(function(){
        addItem();
        refreshDatepickers();
        return false;
    });


function addItem(){
    var itemRow = $('#rowtemplate');
    var newRow = itemRow.clone().removeAttr('id');
    newRow.appendTo($('.newQuote tbody'));
    newRow.attr('id', 'item_'+(newRow.siblings().length+1));
    return false;
}

function refreshDatepickers(){
    var tobeDated = $('.datepicker');
    $.each(tobeDated, function(){
        $(this).removeClass('hasDatepicker').datepicker({dateFormat: "dd/mm/yy"});

    });
}

The simplified html for the row that is duplicated for each new row is as follows:
The datepicker iinput gets this kind of id added on the fly (by the datepicker plugin I’m assuming)
id=”dp1358783794011″

 <div style="display:none;">
<table>
    <tr id="rowtemplate">
        <td><input type="text" class="qi-name" name="items[title][]"/></td>
        <td><textarea class="qi-desc" name="items[description][]"></textarea></td>
        <td><input type="text" class="qi-del datepicker" name="items[delivery][]"/></td>

        <td class="qi-act">
                <a href="#" class="actAs qi-apply"></a>
                <a href="#" class="qi-delete"></a>
        </td>
    </tr>
</table>

Answer 1

Suggest caching your row template before running any other code, then add clone of the cached row when adding a new row

/* remove ".find(':input').val('').end()" if no data will be populated at run time*/
var cacheRow=$('#rowtemplate').clone().removeAttr('id').find(':input').val('').end();

/* run init code*/

function addItem(){    
    var newRow =cacheRow.clone();
    newRow.appendTo($('.newQuote tbody'));
    newRow.attr('id', 'item_'+(newRow.siblings().length+1));
    return false;
}