jQuery UI DatePicker 没有出现在通过 Ajax 加载的 Bootbox 模式中

Posted 2023-05-07

【中文标题】jQuery UI DatePicker 没有出现在通过 Ajax 加载的 Bootbox 模式中

【英文标题】：jQuery UI DatePicker not appearing inside Bootbox modal loaded through Ajax

【发布时间】：2015-12-25 19:50:35

【问题描述】：

我需要将表单动态加载到 Bootbox 模式窗口中。我正在通过 Ajax 加载表单。表单中有一个 jQuery UI datepicker 字段。

使用浏览器的调试器，当通过 Ajax 加载表单时，我可以看到添加到 DOM 的 datepicker 元素。但是，单击该字段不会执行任何操作。日历没有出现，更重要的是，日期选择器 DOM 元素不会像我直接在页面上加载日期选择器字段时那样发生变化。

这是我在索引页面中的 Ajax 调用：

$.ajax(
    type: "post",
    timeout: "100000",
    url: "/cfc/site_functions.cfc",
    beforeSend: function () 
        bootbox.dialog(
            message: "Loading...",
            title: modal_title,
            onEscape:false,
            backdrop:true,
            closeButton:true,
            buttons: 
                "Cancel": 
            
        );
    ,
    data: 
        method: "buildMyForm"
    ,
    success: function(objResponse)
        $(".bootbox-body").html(objResponse);
    ,
    error: function(xhr, ajaxOptions, thrownError)
        $(".bootbox-body").html("Error loading form.");
    
);

这是由 Ajax 调用调用的 Coldfusion 函数，它构建表单并初始化 datepicker 字段：

<cffunction name="buildMyForm" access="remote" returntype="any" returnformat="plain">

    <cfsavecontent variable="local.buildMyForm">

        <script type="text/javascript">
            $(document).ready(function(e) 
                $("#date_posted").datepicker(
                    showAnim: "slide"
                );
            );
        </script>

        <cfoutput>

            <form method="post" id="edit_form" name="edit_form">

                <div class="form-group">
                    <label for="date_posted" class="required">Date</label>
                    <input type="text" class="form-control" id="date_posted" name="date_posted" required autocomplete="off">
                </div>

            </form>

        </cfoutput>
    </cfsavecontent>

    <cfreturn local.buildMyForm>
</cffunction>

有什么想法为什么 datepicker 元素会初始化，但是当您单击日期字段时却不起作用？有一个类似的问题，但它的解决方案是更新 CSS，因为 datepicker 日历显示的 z-index 低于 Bootbox 模式。但是，就我而言，当您单击日期字段时，根本不会填充 datepicker 元素，因此这不仅仅是隐藏它的问题。

【问题讨论】：

也许尝试将.datepicker() 调用移到.html() 之后的成功函数中，而不是在ColdFusion 函数中。由于ajax 负载，不能触发$(document).ready(function(e) );。

不走运。我首先将其从功能中删除并刷新。然后我尝试在模式中打开表单，并且 datepicker 元素从未出现在 DOM 中 - 正如预期的那样。然后我在.html() 之后添加了datepicker() 调用，再次，datepicker 元素被初始化并出现在 DOM 中，但单击该字段没有任何作用。

控制台有错误吗？

不，没有错误。

你能在 Fiddle/Codepen 中重现这个吗？我试过了，但一切正常：codepen.io/anon/pen/gaLBwp

【参考方案1】：

感谢 @EdenSource 帮助缩小问题范围。

似乎在触发日期选择器代码时可能存在一些竞争。我更新了 CFC 中的 javascript（由 ajax 函数调用以构建表单的代码）并且它起作用了：

<script type="text/javascript">
    $(document).ready(function(e) 
        $("#date_posted").on("focus",function()
            if(!$(this).hasClass("hasDatepicker"))
                $(this).datepicker(
                    showAnim: "slide"
                );
                $(this).addClass("hasDatepicker");
                $(this).datepicker("show");
            
        );
    );
</script>