在 ajax 应用程序中集成 jquery UI datepicker 的问题答案

【问题标题】：Problems integrating jquery UI datepicker in ajax application在 ajax 应用程序中集成 jquery UI datepicker 的问题
【发布时间】：2010-09-05 02:34:22
【问题描述】：

我正在开发一个基于 ajax 的应用程序，并尝试将 jquery datepicker（及其 timepicker 扩展）添加到一些表单中。它们只提供我需要的功能。我现在遇到的基本问题是处理 DOM 不完整或在应用程序中更好地触发（单击编辑按钮或添加按钮）以生成表单的环境。所以集成日期选择器不是一件容易的事（或者？）。我不能使用文档准备功能，因为在 onload 已经完成时，包含 datepicker 元素的表单在 onload 后不存在。所以我想我将 datepicker 调用包装到一个函数中，通过 onclick 触发它，如下所示：


var dp=function(divname, btimeonly) {
    // --- if timeonly, use the datetimepicker ui extension otherwise the ui datepicker
    var tonly = (btimeonly) ? true : false;
    if (tonly) {
        return $('#' + divname).datetimepicker({
            timeFormat: 'hh:mm',
            timeOnly: true
        });
    } else {
        $.datepicker.setDefaults($.datepicker.regional['']);
        $('#' + divname).datepicker($.datepicker.regional['de']);
        return $('#' + divname).datepicker({ });
    }
};

输入字段如下所示


<input type="text" id="newsdate" name="newsdate" maxlength="10" value="' . $data['newsdate'] . '" style="width:200px" onclick="dp(\'newsdate\', false);">

所以这里的基本问题是，我需要在输入字段上单击 2 次（或进入该输入字段以激活日期选择器。我怀疑是因为事件没有第一次注册。

我现在卡住了，有什么方法可以在我的 ajax 环境中一键触发日期选择器。


showOn: 'button',
buttonImage: 'images/icon-calendar.gif',
buttonImageOnly: true,

不可能，当然不是我所说的日期选择器。

我可以用不同的方式加载选择器吗？我应该在哪里加载？还是只是在 ajax 生成的环境中使用 jquery 浪费了时间，而我应该使用本机 javascript 函数？我不希望是最后一个，因为我非常喜欢 jquery 及其功能。在其他应用程序中多次使用它。因此，在我的 ajax 生成环境中加载、选择器和元素 ID（及其有效性）是我想要解决的问题。

非常感谢任何提示。我试图在 stackoverflow 上阅读类似的问题，但似乎没有找到解决方案。

谢谢！安德烈亚斯

【问题讨论】：

标签： jquery ajax datepicker

【解决方案1】：

好吧，经过一番挖掘后，我自己找到了一个可以使用的解决方案。我正在使用 php/xajax 类，有一个允许执行 javascript 的响应对象的方法 addScript()。我现在可以将所有与 jquery 相关的代码包装到一个 javascript 函数中，并且一旦响应对象被执行，该函数就会被执行。

所以在php中...


...
$responseObj->addScript("finit()");
...

而 javascript 函数就像 ...


function finit() {
    $('#newsdate').click(function() {
        $(this).datepicker( {} )
    });
};

这就是诀窍。以防万一有人卡在同一点上。

但无论如何，如果有其他方法会很有趣。所以不要刻意展示它。

【讨论】：