JQuery DatePicker not working on newly added string

Question

I have a gridview that displays as a table. I have an “Add” button and click on it, it will create a new row in the table. Creating a string is done using the "clone (true)" method in jQuery. A cloned row is a dummy row that is hidden in a gridview. I have set jQuery DatePicker for TextBox. It works fine for an existing string. But when I click on the DatePicker text box for the newly added row, it does not open. It opens for an existing row. What could be the problem?

My code is similar:

$("input[name $= 'txtDateOrdered']").datepicker({ showButtonPanel : true , showOn : 'button' , buttonImageOnly : true , buttonImage : '../../Image/calendar.gif' }); 

Answer 1

It's hard to say without seeing your code, but ..

This is probably due to the fact that the jquery used to assign the datepicker to the input is called when the page loads. Therefore, when you clone an input, the date picker is not connected to the recently cloned input (since it did not exist when the page loaded).

After calling the cloning method, you will need to connect the datupick to the new input.

Answer 2

You must first remove the hasDatepicker class from the cloned element.

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

Answer 3

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

Binds a handler to an event (for example, a click) for all current and future - a consistent element.

Answer 4

Perhaps the cloned TextBox has the same identifier as the original one, which confuses calendar management? If not, provide more code and possible error messages.

Answer 5

You can also add / force an event to control the process. For example, I have one place where I add and autofill the added item. This way I control the "change" event (inside the .change () function):

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

Then I call the function inside the change event handler for a specific element that has autocomplete in it to add it to that element. There are other ways, my circumstance. I do this manually because I am manipulating a complex new addition, 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 handlers to the newly added object in the row that you add to the table.

Answer 6

Try the following:

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