Beginnercode.com

I’m rather new to both javascript and jQuery. I ran into an issue while cloning table rows that had inputs, and jQuery UI datepicker.

The cloned datepicker input would insert the picked date into the original inputs rather than the cloned row.

The inputs in my table rows had no ID’s. So what I found was either jQuery or UI was dynamically creating it’s own DOM id’s for the inputs in the table rows that had the datepicker call. Datepicker also was dynamically inserting a class “hasDatepicker” into the inputs that had the datepicker call.

I resolved this by:
1. Looping through the cloned rows inputs looking for any inputs with the class “hasDatepicker”.
2. Removing the hasDatepicker class from any inputs with that class.
3. Getting that inputs current id, incrementing it by 1, and reassigning it.
4. Re-initializing the datepicker call.

<script type="text/javascript">

$(document).ready(function(){

  // -- Clone table rows
  $(".cloneTableRows").live('click', function(){
    // do the cloning...

    // new rows datepicker need to be re-initialized
    $(newRow).find("input").each(function(){

      // if the current input has the hasDatpicker class
      if($(this).hasClass("hasDatepicker")){
        var this_id = $(this).attr("id"); // current inputs id
        var new_id = this_id +1; // a new id
        $(this).attr("id", new_id); // change to new id
        $(this).removeClass('hasDatepicker'); // remove hasDatepicker class
        $(this).datepicker(); // re-init datepicker
      }

    });

  });

});

</script>

Whats really neat about this particular js, is that you can call it from any table that has an id.

The only thing I have yet to figure out is how to reset the cloned datepicker to use the default class called date format.