JQuery Apply selector to each field in dynamic form

Question

I have a form that is dynamically created using this jQuery plugin

http://code.google.com/p/jquery-dynamic-form/ 

When I duplicate a div , all fields in the div are duplicated, and -as-docs state- brackets are added to the field name

I also use jQueryUI. I am using datePicker plugin

 $("#myDynDateField").datepicker(); 

It works great when there is only 1 instance of this datePicker field. When I duplicate the entire div, the datePicker field is also duplicated and errors start

 
  inst is undefined 
  uncaught exception: Missing instance data for this datepicker   

 

1) How can I use a jQuery selector that also covers all duplicate fields?
2) How can I make sure that each duplicate datePicker field will have its own correct instance, etc.?

Thank you very much in advance,

Answer 1

I'm not sure if you use $.clone() to "duplicate" your elements, but if so, the problem may arise due to the transition to the true flag. e.g. $('div#id').clone(true) . This clones the element, as well as the events associated with it (and these are children). However, using this jquery ui element can mess up a few things, so it's best to override the ui info element after duplicating it.

Most likely, you do not control this granularity. More or less, you run into problems because jqueryui does not know about these duplicate form fields. I would suggest deleting the "cheated" version of the datepicker field and replace it with a new datepicker field.

Something like that:

 // code to duplicate form // ... // Now replace the element with one just like it but without any events $('#newDupedForm') .find('.datefield') .replaceWith( $(this).clone(false).datepicker(options) ); 

This should get rid of any references to the old jquery ui datepicker from another element and create a new instance, however if there is something missing for me, you can always create an input element from scratch and do replaceWith with this.

Answer 2

It started working for me when I implemented the recommendations in this thread :

 $('input.hasDatepicker', $clone).removeClass('hasDatepicker'); 

If you use $.slideDown , this must be done after the slide is completed, for example:

 $clone.slideDown(function() { $('input.hasDatepicker', $clone).removeClass('hasDatepicker'); }); 

I hope this helps others; it annoyed me!