Cloning table rows and jQuery UI Datepicker()
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.
Hi ,
I’ve just hit the same problem in jQuery, (trying to clone/duplicate table rows) so glad I found your blog post! After a bit more refactoring, I streamlined it a bit more. Take a look, see what you think:
$(‘.hasDatepicker’, newRow).each(function(){ $(this).removeClass(‘hasDatepicker’).removeAttr(‘id’).datepicker( { dateFormat: ‘dd/mm/yy’ } ); });
Now instead of incrementing the ID, we remove it and let the datepicker re-init take care of that!
Cheers, Lee.
@Lee Kelleher
Cool and thanks for the non-spam comment hehe. After posting it I realized I could have made it cleaner. I havent tried your way of doing it. What I am curious about is re-init-ing the datepicker again. Especially on a colorbox form with multiple pickers. Would re-init-ing (hard to spell) cause problems?
cheers guys.
can i see the full code script?
Nice article material Thank’s alot
You know, it’s a bit strange, I’m not here to clone datepicker, but an Invoice with Inventory system.
I just happen to like your code and its simplicity to be applied to other areas of jquery + php.
Thanks a lot! Keep up the good work. )
really good blog ,It help me a lot .
Up to 6 hours talk time and 8 days standby time
Status Display makes it easy to check battery level and Bluetooth connectivity at a glance
Touch volume control, answer/end button, voice dialing (depending on the phone used)
Streams music from A2DP-enabled mobile phones
Connect two Bluetooth enabled devices at the same time with Multiuse capabilities
Bluetooth 2.1+EDR technology Jabra BT2080 Universal Bluetooth Wireless Headphone
TK-421 Mini Bluetooth Version v2.0 Mobile Keyboard Case
angry birds back pack
angry birds pen
bluetooth tape adapter
good post ,thanks for your sharing . Transformers Led Flashlight
This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informative article.
I’d been very pleased to locate this great site.I need to to appreciate this brilliant read!! I definitely enjoying every part of it and I maybe you’ve bookmarked to view new belongings you post.
longchamp
I have never read such a lovely post and I am coming back tomorrow to continue reading.
This conversation is going no where. It’s lacking the place of a
good leader to head the things to come out on conclusion.
I am waiting for ur quick positive reply. Have a nice day,It is very helpful to know about different historical tourist places all the world. Thank you for providing such useful informations.