IE8中jquery UI弹出窗口中的ajax表单问题答案

【问题标题】：issues with ajax form inside jquery UI popup in IE8IE8中jquery UI弹出窗口中的ajax表单问题
【发布时间】：2011-05-09 19:38:23
【问题描述】：

我在试验 jQuery UI 和 MVC3 时偶然发现了以下问题：

我有一个使用 AJAX 的非常基本的页面

<%: Ajax.ActionLink("Edit", "Edit", new { id = 1 }, new AjaxOptions() { UpdateTargetId = "dialog", OnSuccess = "DisplayPopup" }, null)%>

<div id="dialog" title="Location">

</div>

这是控制器代码：

    public ActionResult Edit(int id)
    {
        return PartialView();
    }

    [HttpPost]
    public ActionResult Edit()
    {
        return Content("Saved!");
    }

和部分视图编辑：

<b>whatever</b>

<% using (Ajax.BeginForm("Edit", "Home",
    new AjaxOptions()
    {
        UpdateTargetId = "editForm",
        HttpMethod = "POST"
    }))
{%>
<div id="editForm">
    <input type="submit" value="Save" />
</div>
    <% } %>

上面的代码运行良好。

现在我添加 jquery UI 弹出代码：

<script type="text/javascript">
    function DisplayPopup() {
        $('#dialog').dialog('open');
    }

    $('#dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });
</script>

之后在 Firefox 和 Chrome 中它工作正常，而在 IE8 中我看到以下问题：

单击编辑 - 使 AJAX 调用 Edit(int id) 操作并在弹出窗口中显示编辑视图
单击保存 - 对 Edit() 进行 AJAX 调用并显示文本“已保存！”
关闭弹出窗口
点击编辑 - AJAX 调用 Edit(int id) - 再次
点击保存 - 这次是 FULL 回发（仅在 IE 中）

有什么想法吗？

谢谢！

【问题讨论】：

我只是用thickbox（jquery.com/demo/thickbox）而不是jQuery UI弹出窗口做了同样的事情，它在所有三个浏览器中都运行良好......
看起来 jqueryUI 模态对话框可能存在问题 - 我在这里提交了错误票 bugs.jqueryui.com/ticket/6679
尝试在关闭事件中销毁对话框，并在每次 displaypopup 函数中创建新对话框

标签： asp.net-mvc jquery-ui jquery asp.net-mvc-2

【解决方案1】：

我遇到了同样的麻烦：在 FF 中工作，但在 IE8 中没有。

尝试在部分视图响应中添加一些内容。

我在 IE 中遇到了同样的问题，最终将 @ViewBag.Message 添加到部分视图响应中，其中 ViewBag.Message = "Submitted " + DateTime.Now.ToLongTimeString(); 在 Post 的控制器中分配。

这突然而令人惊讶地导致部分视图在正确的目标元素中呈现，而不是在 IE8 中将视图作为新页面加载。

【讨论】：

【解决方案2】：

试试这个，第一次看到它有效，但第二次无效。每次都新建一个对话框，完成后销毁它。

<script type="text/javascript">
    function DisplayPopup() {
        $('#dialog').dialog({
        autoOpen: true,
        width: 600,
        modal: true,
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }, close: function() {
                $(this).dialog("destroy");

            }
    });
    }


</script>

【讨论】：