模态表单 - AjaxStart 和 End - .load 和 .ajax() 调用

Question

我正在开发一个 .NET MVC 3 项目，在该项目中，我使用 jQuery 在模式对话框中加载了所有基于 form 的视图。

我的所有视图都是在整个项目中使用 ajax 加载的。

我有一个 jQuery 函数，我调用任何链接点击事件来获取给定的 url（基于表单的视图，如编辑、添加等）并将其显示在模态对话框中，如下所示：

function getFormInModal(url_location, modalWidth, modaltitle, tab) {
    var url = url_location;
    var dialogDiv = $('<div style="display: none;"></div>').appendTo('body');
    dialogDiv.load(url, function () {
        //Enable the client side validation
        var $form = $('form', dialogDiv);
        $.validator.unobtrusive.parse($form);
        var buttons = {
            "Submit": function () {
                //Create a validation summary container
                var valSummary = ModalForms.validationSummary();
                valSummary.setup($form);
                if ($form.valid()) {
                    var postUrl = $form.attr('action');
                    var formData = $form.serialize();
                    jQuery.ajax({
                        url: postUrl,
                        type: 'POST',
                        data: formData,
                        complete: function (data) {
                            dialogDiv.dialog('close');
                            refresh(tab);
                            $.jGrowl("Submitted Successfully.", { life: 2000 });
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var data = jQuery.parseJSON(jqXHR.responseText);
                            if (data && data.errors) {
                                valSummary.addErrors(data.errors);
                            }
                        }
                    });
                }
            },
            Cancel: function () {
                dialogDiv.dialog('close');
                $("html,body").css("overflow", "auto");
            }
        };
        //Load up the dialog
        dialogDiv.dialog({
            autoOpen: true,
            modal: true,
            title: modaltitle,
            draggable: false,
            resizable: false,
            buttons: buttons,
            width: modalWidth,
            close: function () {
                $(this).remove();
            },
            open: function (event, ui) {
                $("html,body").css("overflow", "hidden");
            }
        });
    });
}

我的问题出在模态框的submit 按钮的success 功能上。

它做了三件事： 1.关闭模态表单对话框 2.通知用户POST成功 3. 通过调用另一个简单函数refresh() 来刷新特定DIV 中的内容。

function refresh(tabname) {
    if (tabname == "dashboard") {
        $("#dashboard-tab").load("/Sales/Home/Reports");
        $("#tabs").tabs("select", 0);
    }
    if (tabname == "leads") {
        $("#leads-tab").load("/Sales/Lead/Index");
        $("#tabs").tabs("select", 1);
    }
    if (tabname == "retail") {
        $("#retail-tab").load("/Sales/Retail/Index");
        $("#tabs").tabs("select", 2);
    }
    if (tabname == "corporate") {
        $("#corporate-tab").load("/Sales/Corporate/Index");
        $("#tabs").tabs("select", 3);
    }
}

现在，我分别在 DOM 上连接了一些事件，这些事件处理我的 ajax 调用状态，如下所示：

$("#loading").dialog({
    autoOpen: false,
    modal: true,
    width: '450px',
    title: 'Patience is a virtue!',
    resizable: false,
    draggable: false
});

$("#loading").ajaxStart(function () {
    $("#loading").dialog('open');
    $("html,body").css("overflow", "hidden");
});

$("#loading").ajaxSuccess(function () {
    $("#loading").dialog('close');
    $("html,body").css("overflow", "auto");
});

$("#loading").ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
    $("#loading").dialog('close');
    $.jGrowl(html(thrownError.toString()), { life: 2000 });
});

一切都很完美 - - 我点击一个链接 - 我看到了#loading 模态对话框 - 它加载和#loading 关闭和dialogDiv 模式打开 - 我点击提交，#loading 在dialogDiv 顶部打开 - 当它都关闭并且我收到 jGrowl 通知时

最后一步是再次加载内容，但是一旦我的 POST 完成，并且调用 .load() 以刷新内容，#loading 模式不会再次显示。

基本上，.ajaxStart() 不会触发。我不知道为什么。

首先，我为提交按钮的单击事件中的 ajax 帖子编写了一个 success 函数。然后我意识到complete 可能会更好。

即使是现在，我在调用 refresh() 并因此调用 .load() 在唯一的其他实时 .ajax() 调用完成后，.ajaxStart() 不起作用。

谁能帮忙！！

Answer 1

我唯一能看到的是，当您调用刷新函数时，当前的 ajax 请求仍在处理中，这导致您的 ajaxStart 方法无法触发。尝试编辑您的 ready() 方法以将 beforeSend 方法添加到您的 ajax 设置中。我发现 ajaxStart 总是表现得很奇怪，这就是为什么 beforeSend 通常更可靠（imo）。

$(document).ready({
   $.ajaxSetup({
      beforeSend: function()
      {
         $('#loading').open();
         $('html,body').css('overflow', 'hidden');
      }
   });
   /* Rest of your initialization here */
});

希望这对您有所帮助。