模態形式 - AjaxStart和結束 - .load和.ajax（）調用

Question

我正在一個.NET MVC 3項目，我已經使所有基於form的視圖使用jQuery在模態對話框中加載。

自己的看法所有使用整個項目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模態對話框 - IT負載和#loading關閉和dialogDiv模式打開 - 我點擊提交和#loading在dialogDiv 的頂部打開了 - 當它完成兩個關閉，我得到jGrowl通知

最後一步是加載的內容再次發生，但是一旦我的POST完成，並​​調用刷新內容#loading模態不再顯示。

基本上.ajaxStart()不點火。我不知道爲什麼。

首先我寫了一個success函數，用於在提交按鈕的單擊事件中創建的ajax帖子。然後我意識到complete可能會更好。

即使現在，你在調用refresh（），因此​​完成後，只有其他live .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 */ 
}); 

希望這有助於並會爲你工作。