Question

我想我错过了一些简单的东西，但是我一遍又一遍地看着相同的代码而感到茫然，可能会使用另一双眼睛。

我有一个MVC局部视图，其中包含一个Form。

<div class="Clear"></div>
 <div class="OverFlow">
     @using (Html.BeginForm(null, null, FormMethod.Post, new {id = "formId"}))
     {
         <div class="ErrorBx1">@Html.GetData()</div>
         <table>
             @Html.EditorFor(m => m.FormModel, "MyEditorTemplate") 
             <tr>
                 <td colspan="2"></td>
                 <td><input type="image" src="@Images.ResolveDefault("btn-send.jpg")" alt="Send" class="Send" /></td>
             </tr>
         </table>
     }
 </div>

此视图还包含一些Javascript

<script type="text/javascript">
    $(function () {
        $('#formId').submit(function () {
            $.ajax({
                cache: false,
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (res) {
                    if (res.success) {
                        alert("success");
                        closeDialog();
                        window.parent.specialFunction();
                    } else {
                        alert("not success");
                        $('#someElement').replaceWith(res);
                    }
                }
            });
            return false;
        });
    });
</script>

这是执行的控制器方法

[HttpPost]
public ActionResult Index(MyViewModel viewModel)
{
    if (CheckSuccess())
    {
        return Json(new { success = true });
    }

    return ViewNoLayout("otherView", viewModel);
}

此视图将加载到jQuery.UI对话框中。第一次加载对话框时，单击窗体上的提交按钮可正确执行成功功能 - 弹出警报，关闭对话框并调用父函数。如果我再次弹出对话框并单击提交按钮，则调用将转至服务器并正确处理，但页面将重新加载并仅显示JSON字符串（无警报等）。我假设有一些我缺少的客户端缓存，或类似的东西。有什么想法吗？

Answer 1

从您的视图中移除document.ready：

<script type="text/javascript">
    $('#formId').submit(function () {
        $.ajax({
            cache: false,
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (res) {
                if (res.success) {
                    alert("success");
                    closeDialog();
                    window.parent.specialFunction();
                } else {
                    alert("not success");
                    $('#someElement').html(res);
                }
            }
        });
        return false;
    });
</script>

原因是当您将部分注入DOM时，第二次不再执行document.ready。因此，您的提交事件不再被附加。请小心提前：删除document.ready意味着您必须在第一次加载此页面时将此脚本放在标记之后，它根本不会附加它。

显然，我所说的这一切只是为了解决你当前的问题。

但是你真正的问题是你正在混合标记和HTML。永远不应该这样做。标记属于视图，脚本属于javascript文件。 单独的 javascript文件。所以你应该把它外化成一个单独的js文件。因此，真正的解决方案是使用.on()将单个文件放在单独的文件中（如果您使用的是旧版jQuery版本，则为.delegate();如果您使用的是史前版本的jQuery，则使用.live() ）生动订阅在订阅时可能尚未出现在DOM上的元素：

$(document).on('submit', '#formId', function() {
    $.ajax({
        cache: false,
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (res) {
            if (res.success) {
                alert("success");
                closeDialog();
                window.parent.specialFunction();
            } else {
                alert("not success");
                $('#someElement').html(res);
            }
        }
    });
    return false;    
});

通过Ajax在jQuery UI Dialog中提交部分视图中的表单只能在第一次成功执行

1 个答案: