jQuery日期选择器在Firefox和IE的MVC部分视图上进行ajax更新后无法工作

jQuery datepicker not working after ajax update on MVC partial view in Firefox and IE

本文关键字：ajax 更新 工作 视图 Firefox 选择器 日期 IE MVC jQuery      更新时间：2023-12-05

我有一个MVC视图，它有一个div容器，我通过ajax更新它。

<div id="PartialContainer"></div>
<script type="text/javascript">
$.ajax({
        url: '/my/partial_action',
        success: function(result) {
            $("#PartialContainer").html(result);
        }
    });
</script>

控制器动作代码：

public ActionResult partial_action()
{
    return PartialView("_MyPartial");
}

最后，_MyPartial视图：

<input type="text" class="datepicker" />
<script type="text/javascript">
    $(function() {
        alert("before");
        $("input.datepicker").datepicker();
        alert("after");
    });
</script>

问题是：这在Chrome中运行良好，我可以很好地显示日期选择器下拉列表，两个警报（之前和之后）都会显示。然而，在FF和IE中，日期选择器不起作用。我确实收到了这两个警报，但没有收到日期选择器的行为。没有firebug/F12脚本错误。

我尝试在部分视图之外添加一个日期选择器输入，它在所有浏览器中都运行良好。

我使用的是jQuery ui 1.7.2，mvc 4。

有人知道为什么会发生这种事吗？

EDIT:所以我解决了这个问题，它不是javascript问题，而是样式问题。我在twitter引导对话框中使用了日期选择器，它涵盖了日期选择器。更改一些z索引为我修复了它。

尝试删除$.ready调用并将其替换为IIFE，因此代码如下：

<input type="text" class="datepicker" />
<script type="text/javascript">
    (function() {
        alert("before");
        $("input.datepicker").datepicker();
        alert("after");
    })();
</script>

编辑：我现在已经检查过了，这两种情况在FF 13、IE 9、Opera 12和Safari 5中都能正常工作。然而IE似乎缓存了结果，这可能是问题所在。尝试在你的url中添加一些随机参数，或者在基页中设置cache: false（默认为true）到ajax调用

<div id="PartialContainer"></div>
<script type="text/javascript">
$.ajax({
        url: '/my/partial_action',
        cache: false,
        success: function(result) {
            $("#PartialContainer").html(result);
        }
    });
</script>

我在Bootstrap Datepicker v1.8.0中遇到了类似的行为。日期选择器在分部视图的初始显示中按预期工作，但如果使用Ajax调用使用新数据刷新分部，则日期选择器无法响应。

通过在Ajax中成功地在重新加载部分视图后将文本字段重新绑定到日期选择器，解决了这个问题。

function editApplicant(id) {
var dataRow = {
    'applicant' : id
};
$.ajax({
    type: 'POST',
    url: "/Cases/GetApplicant",
    data: dataRow,
    success: function (data) {
        $('#applicantDetail').html(data);
        /* Rebind the date of birth field to a datepicker */
        $('#DOBString').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            orientation: 'bottom left'
        });
        showApplicantView();
    },
    error: function (data) {
        showApplicantView();
    }
});

}

相关文章：