jQuery DatePicker not working on newly added row

Question

I've got a gridview that renders as a table. I have an "Add" button and clicking on that, it will create a new row in the table. The row creation is done using "clone(true)" method in jQuery. The cloned row is a dummy row which is hidden in the gridview. I've assigned jQuery DatePicker for a TextBox. It works fine for the existing row. But when I click the DatePicker textbox for newly added row, it doesn't open. It opens for the existing row. What might be the problem?

My code is like:

$("input[name $= 'txtDateOrdered']").datepicker({

        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});

Answer 1

You have to remove the "hasDatepicker" class from the cloned element first.

$(".selector").removeClass('hasDatepicker').datepicker({
        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});

Answer 2

Hard to tell with out seeing your code but..

This is probably due to the jquery used to assign the datepicker to the input is called on page load. Hence when you clone the input the newly cloned input doesn't have the datepicker hooked up to it (since it didn't exist on page load).

You will need to hook up the datepicker to the new input after you call the clone method.

Answer 3

I assume you added the datepicker on document.ready to all elements that match a given selector. This does not add it to elements created in the future. To do that, you should check out jQuery live:

Binds a handler to an event (like click) for all current - and future - matched element.

Answer 4

Maybe the cloned TextBox has the same ID as the original one, thus confusing the calendar control? If not, please provide more code and possible error messages.

Answer 5

You can also add/force an event to manage the process. For an example, I have one place where I add and autocomplete to an added item. I manage the "change" event thus (inside a .change() function):

$(this).change(); // fire change event (to be used in other user controls)

Then I call a function inside a change event handler for the specific item which has an autocomplete in it to add it to that item. There are other ways, my circumstance dicated I do this manually as I am manipulating a complex newly added section, not just a table row.

/* apply autocomplete function */
function myAddAuto()
{
    $(".cptEntryArea").autocomplete("mywebservice/myService.asmx/GetMyAutocomplete", {
        dataType: 'json',
        data: {},
        type: "POST",
        contentType: "application/json; charset=utf-8",
        parse: function(data) { return myAutocompleteJSONParse(data); },
        maxRows: 100,
        formatItem: function(row) { return row["Description"] + ' (' + row["MyCode"] + ')' },
        minChars: 2,
        matchSubset: false,
        scrollHeight: 100,
        width: 300
    });
};

There are other ways, but the basic premise is the same - add the handlers to the newly added entity within the row you add to the table.

Answer 6

Try this:

 $("row-you-are-cloning").clone().appendTo("your-table").datepicker({
    showButtonPanel     :   true,
    showOn              :   'button',
    buttonImageOnly     :   true,
    buttonImage         :   '../../Image/calendar.gif'
});