DWR 回调更新 dom 元素，附加到更新元素的 jquery ui datepicker 未显示答案

【问题标题】：DWR callback updating dom elements, jquery ui datepicker attached to updated element not showing upDWR 回调更新 dom 元素，附加到更新元素的 jquery ui datepicker 未显示
【发布时间】：2011-11-25 15:31:13
【问题描述】：

我有一个搜索表单，上面有以下 INPUT 字段

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

访问此搜索表单时，我可以看到附加到 input#pickUpDate 元素的日期选择器。

我使用 DWR 通过调用 search(...) 函数（如下所示）提交此搜索表单。

我使用收到的响应重置 HTML 正文元素的数据。在收到的回复中，我有一个类似的搜索表单，其中包含相同的输入元素 (input#pickUpDate)。但是之后我重置了正文元素的数据使用

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

在 DWR 回调函数中并尝试附加 datepicker 它不起作用。我检查了元素附加了 datepicker 的“hasDatepicker” 标记类名称，但仍在关注/单击输入字段我看不到日期选择器。

以下是我的 jQuery 代码：

 (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';
});

我已经浏览了我能找到的所有相关帖子，但其中提到的解决方案对我不起作用。

我需要知道是什么导致了上述问题以及如何解决这个问题？

谢谢，
吉格尼什

【问题讨论】：

标签： ajax jquery-ui-datepicker dwr

【解决方案1】：

我已经解决了这个问题。并在此处发布我的解决方案以供参考：

// 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);
        }
    });
};

据我了解，这是导致问题的原因的解释

在 AJAX 调用之前，它的值被 jquery.ui.datepicker.js 源代码中的以下块设置为 true（该块可以在文件末尾附近找到）

代码：

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

由于在 DWR 更新页面上的 HTML 后，$.datepicker.initialized 值始终为“true”，因此 $.datepicker.dpDivdatepicker() 时，jquery.ui.datepicker.js 源代码中的 /strong> 未附加到标记尽管标记类 'hasDatepicker' 被应用，但导致日期选择器未显示。

谢谢，吉格尼什

【讨论】：