Problem with jQuery UI Datepicker and Copied Dynamic DOM: Solved

Today, I ran into an interesting problem with the jQuery UI Datepicker, for which I couldn’t find any assistance. In retrospect, it was a fairly simple issue but it took me quite awhile to debug. If I didn’t have Firebug, I don’t think it would’ve ever been solved this issue. I spent a great deal of time searching for solutions on Google but unfortunately nobody was able to help me solve my problem so I thought I would document this here for anyone else in the same shoes.

What I was up to:
I was trying to create a dynamic address section. I was using some simple jQuery to copy a section of code (.address_template) and then I was using jQuery to inject it into the document. The goal was to allow the user to add an unlimited number of previous addresses, each with a start and end date selectable using the jQuery UI datepicker.

The problem:
In my document, I was using jQuery to create instances of datepicker() for each instance of .address_date. This worked great for the single instance that appeared but failed miserably for elements added dynamically to the DOM after the page had loaded. I tried various solutions I found for similar problems other users had. Some of these included:

- Adding a unique ID to each instance of the datepicker.
- Using datepicker(“destroy”) then redeclaring datepicker()

#(‘address_template’).datepicker(‘destroy’).datepicker();

This technique works excellent if all of your elements were added properly to DOM but I discovered another but I wasn’t expecting.

What I was doing wrong:
I was copying the HTML after the datepicker(); had been initially added to the template. This means I was copying the HTML after the datepicker() function had modified it. Before I spent some time analyzing the HTML with Firebug I didn’t realize that the datepicker() function actually modifies the HTML adding in its own class .hasDatepicker.

When I copied the HTML I was copying the HTML after this class was added so the jQuery UI failed when trying to initiate a new datepicker(); and datepicker(“destroy”); failed because a true instance didn’t exist. I was caught in a real catch 22.

How I solved the problem:
I modified my code to reset the style of the .address_date class when I added it into the DOM prior to adding datepicker to that specific element. As soon as I did this it began to work sweet.

Below is an example of my code in case it is helpful to anyway. This one is really more about theory than exact code:

$('#addaddress').click(function() {
        var count = $('.address_template').size();
        var html = $('.address_template').eq(0).html();
        $('#addaddress').before('<div class="address_template">' + html + '</div>');
        $('.address_template H1').eq(count).html("Previous Address " + count);
        $('.address_date').eq(count).attr("class","address_date");
        $('.address_date').eq(count).attr("id","movein" + count);
        $("#movein" + count).datepicker();
});

Also here are the reference posts from stackoverflow that helped me reach my solution:
1. http://stackoverflow.com/questions/34790/duplicating-jquery-datepicker/1423156#1423156

2. http://stackoverflow.com/questions/1059107/why-does-jquery-uis-datepicker-break-with-a-dynamic-dom

No related posts.

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Created by: Zipline Interactive
Copyright 2010. Ryan Stemkoski. All rights reserved | Technorati Profile

• Home
• About Ryan Stemkoski
• About Zipline Interactive