CODEWITHSUNDEEP
jquery
superachu
superachu

Reputation: 821

jQuery DatePicker not working on newly added row

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'
});

Upvotes: 6

Views: 5043

Answers (6)

miya
miya

Reputation: 1069

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'
});

Upvotes: 11

Majid Fouladpour
Majid Fouladpour

Reputation: 30242

Try this:

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

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

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.

Upvotes: 0

Pekka
Pekka

Reputation: 449385

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.

Upvotes: 0

Tim Büthe
Tim Büthe

Reputation: 63734

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.

Upvotes: 3

CeejeeB
CeejeeB

Reputation: 3114

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.

Upvotes: 7

Related Questions