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");
            }
        });
    });
}

我的问题出在模态的success按钮的submit函数中。

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

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 ready上连接了一些处理我的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模式就不再显示了。< / p>

基本上，.ajaxStart()没有被解雇。我不知道为什么。

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

即使是现在，在完成唯一的其他实时.load()通话后，我正在调用refresh（），因此调用.ajax()，.ajaxStart()无效。

有人可以请帮助!!

Answer 1

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

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

希望这会有所帮助并为您效劳。

模态表单 - AjaxStart和End - .load和.ajax（）调用

1 个答案: