Home > Programming > Cloning table rows and jQuery UI Datepicker()

Cloning table rows and jQuery UI Datepicker()

December 17th, 2009 ^Lestat Leave a comment Go to comments

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.
cloneDatepicker

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.

Categories: Programming Tags:
  1. March 26th, 2013 at 21:04 | #1

    I liked your article is very interesting and attractive. Ads

  2. Mødebooking fra Peak
    March 28th, 2013 at 07:58 | #2

    Well, cloning table rows is a good practice that most developers don’t do which is quite unfortunate to begin with.

    Mødebooking fra Peak

  3. Mødebooking fra Peak
    March 29th, 2013 at 08:36 | #3

    I wish I had known this when I was doing this stuff initially. But thanks for sharing. Salgsmoeder.dk

  4. April 1st, 2013 at 07:01 | #4

    It is possible if they were treated like Bhagat, Vivekananda, Veer Savarkar, Subhash chandra bose, Nehru, Gandhi.

  5. April 3rd, 2013 at 05:45 | #5

    it’s good to see this information in your post, i was looking the same but there was not any proper resource, thanx now i have the link which i was looking for my research. Angel Dialogue

  6. April 4th, 2013 at 22:58 | #6

    thank you for providing them to useful information and interesting. leadfire review

  7. April 4th, 2013 at 22:58 | #7

    I read an article that I really care. leadfire review

  8. April 4th, 2013 at 22:59 | #8

    The problem you set out to make me care so much, I like your post. leadfire review

  9. April 4th, 2013 at 23:00 | #9

    Post your question quite convincing, the content is very special, I love it. leadfire review

  10. fred
    April 7th, 2013 at 13:01 | #10

    Personally like you stuff because of the information about resolve and i check out your demo too…Hotel Articles

  11. April 8th, 2013 at 20:21 | #11

    I haven’t checked in here for some time as I thought it was getting boring, but the last handful of posts are really good quality so I guess I’ll add you back to my daily bloglist. You deserve it my friend.

  12. usnam
    April 9th, 2013 at 01:51 | #12

    I positively enjoying each little bit of it and I have you bookmarked to check out new stuff you
    http://www.bestcustomwriting.com/topic-ideas/research-paper/research-paper-topics-for-sociology-classes

  13. April 12th, 2013 at 02:56 | #13

    While reading your post I found it very interesting and useful to myself. ebrandz reviews

  14. April 14th, 2013 at 16:18 | #14

    I’m not quit sure what it is that it is supposed to do?

  15. April 14th, 2013 at 22:24 | #15

    I wanted to thank you for this great article. Keep your work up.

  16. April 22nd, 2013 at 04:52 | #16

    Really great post nice work i love your work. Thanks. Keep sharing.

  17. April 23rd, 2013 at 02:24 | #17

    Thank you so much dear! I’m happy to hear that you’re inspired and on your way- I wish you nothing but the best

  18. April 23rd, 2013 at 02:25 | #18

    I’m so enjoyable when reading your post. I will recommend it to more people. Thank you for sharing.

  19. April 25th, 2013 at 04:58 | #19

    I often interested in the content useful to their work

  20. usnam
    April 25th, 2013 at 16:34 | #20

    We are really grateful for your blog post. You will find a lot of approaches after visiting your post.
    halftone fonts

  21. April 27th, 2013 at 12:09 | #21

    I still can’t quite assume that I could be one of those reading through the important tips found on your web blog. My family and I are truly thankful for your generosity and for providing me the chance to pursue my chosen career path. Thanks for the important information I got from your blog.

  22. April 27th, 2013 at 12:09 | #22

    I still can’t quite assume that I could be one of those reading through the important tips found on your web blog. My family and I are truly thankful for your generosity and for providing me the chance to pursue my chosen career path. Thanks for the important information I got from your blog. agen bola

  23. May 1st, 2013 at 07:43 | #23

    Defeat is not the worst of failures. Not to have tried is the true failure.

  24. May 2nd, 2013 at 21:41 | #24

    RedEye On Demand provides rapid prototyping services. Save money & time, with rapid prototyping – RedEye has the most rapid prototyping machinces under

  25. usnam
    May 5th, 2013 at 04:08 | #25

    Really I impressed from this post. Post is a genius and knows how to keep the readers connected. thanks for sharing this with us.
    aero fonts

  26. May 6th, 2013 at 01:32 | #26

    Thanks for sharing. I think it’s completely unbelievable and one of the best blogs I have seen.

  27. May 6th, 2013 at 03:27 | #27

    Great, thanks for sharing this article post . Really looking forward to read more. Awesome.

  28. May 7th, 2013 at 00:55 | #28

    I always identify the good with the information they read, thank you for your article is very useful.

  29. May 7th, 2013 at 01:18 | #29

    Awesome information. I am really surprised with this topic. Thanks a lot for sharing.

  30. May 13th, 2013 at 21:59 | #30

    Thanks for sharing this code, I will apply this for my class.

  31. May 14th, 2013 at 02:49 | #31

    I like your article, thanks for sharing it. I will bookmark it and come back later.

  32. May 14th, 2013 at 12:53 | #32

    Where to get all jquery like this?

  33. May 15th, 2013 at 04:34 | #33

    Flaming enthusiasm, backed up by horse sense and persistence, is the quality that most frequently makes for success.

  34. bestcustomwriting
    May 16th, 2013 at 23:18 | #34

    http://www.bestcustomwriting.com/blog/research-paper-writing/research-paper-outline
    It’s not the tools that you have faith in – tools are just tools. They work, or they don’t work. It’s people you have faith in or not. Yeah, sure, I’m still optimistic I mean, I get pessimistic sometimes but not for long.

  35. webshotn
    May 18th, 2013 at 16:56 | #35

    live cattle auctionsFlaming enthusiasm, backed up by horse sense and persistence, is the quality that most frequently makes for success.

  36. newfreeshipping
    May 21st, 2013 at 20:20 | #36

    The Newfreeshipping an online store, operates various brands,a variety of large-screen smart phones and tablet PCs,and the necessities of life.android 5.0 tablet

Comment pages
1 2 3 254
  1. No trackbacks yet.