DWR callback updating dom elements, jquery ui datepicker attached to updated element not showing up

Question

I have a search form on which I have the following INPUT field

  <input id="pickUpDate" name="pickUpDate" readonly="true" />

When this search form is accessed I can see the date picker attached to the input#pickUpDate element when I click on it.

I submit this search form using DWR by invoking the search(...) function (shown below).

I reset the HTML body element's data with the response I receive. In the response received, I have a similar search form which contains the same input element (input#pickUpDate).However after I reset the body element's data using

    $("body").html(data);

in the DWR callback function and try to attach datepicker it does not work.I inspected that the element is appended the datepicker's "hasDatepicker" marker class name but still on focusing/clicking on the input field I cannot see the datepicker.

Following is my jQuery code :

 (function($){

    enableDatePicker = function(elementSelector) {

        var datePickerInitialisationOptions = {
                numberOfMonths : 3,
                buttonImage : "resources/images/calendar.gif",
                buttonImageOnly : true,
                showOn : 'both',
                closeText : 'Close',
                showButtonPanel : true
            };

        $(elementSelector).datepicker(datePickerInitialisationOptions); 

    };

    // Makes a DWR call
    search = function(..function_params...) {

        AsyncService.getSearchResults(
                ...function_params..., {

            callback: function(data) {

                $("body").html(data);

                $('#pickUpDate').datepicker();

            },

            errorHandler: function(message) {
                alert("Oops: " + message);
            }
        });
    };

}) (jQuery);

$(document).ready(function() {

    $("#id_search-submit").click(function(){        

            ....params...

            search(params);

    });

    enableDatePicker("#pickUpDate"); // This works fine.That is the date picker is shown on initial access of search form when clicking on the INPUT element having id 'pickUpDate';
});

I have gone through all the relevant posts I could find regarding this but the solutions mentioned in them didn't worked for me.

I am in need to know what is the causing the mentioned problem and how to get this resolved?

Thanks,
Jignesh

Answer 1

I have got this resolved.And posting my solution here for reference:

// Makes a DWR call
search = function(..function_params...) {

    AsyncService.getSearchResults(
            ...function_params..., {

        callback: function(data) {

            $("body").html(data);


    $.datepicker.initialized = false; // This resolved the problem
            $('#pickUpDate').datepicker();

        },

        errorHandler: function(message) {
            alert("Oops: " + message);
        }
    });
};

As per what I understood this is the explanation behind what was causing the problem

Before the AJAX call it's value was was set to true by the following block in source code of jquery.ui.datepicker.js (this block can be found near the end of the file)

Code:

/* Initialise the date picker. */
if (!$.datepicker.initialized) {
    $(document).mousedown($.datepicker._checkExternalClick).
    find('body').append($.datepicker.dpDiv);
    $.datepicker.initialized = true;
}

Since the $.datepicker.initialized value was always found "true" after the HTML was updated on the page by DWR, the presentation div referred to by $.datepicker.dpDiv in jquery.ui.datepicker.js source code was not getting appended to the tag when datepicker() was invoked on an element which was causing the datepicker for not getting displayed though the marker class 'hasDatepicker' was getting applied.

Thanks, Jignesh