モーダルフォーム - AjaxStartとEnd - .loadおよび.ajax（）コール

Question

私はすべてのformベースのビューをjQueryを使用してモーダルダイアログにロードするようにした.NET MVC 3プロジェクトに取り組んでいます。

私のすべてのビューは、プロジェクト全体でajaxを使用してロードされます。

私は（など、追加、編集などのフォームベースのビューの）指定されたURLをフェッチする任意のリンクをクリックしてイベントのために呼び出すjQueryの機能を持っており、次のようにモーダルダイアログに表示します。

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の機能にあります。

それは3つの事を行います。 1.モーダルフォームダイアログ 2. POSTが 3.成功したことをユーザーに通知閉じますが、別の簡単な関数refresh()への呼び出しを経由して特定のDIVでコンテンツを更新します。 - - 私はリンク をクリックしてください - 私は見

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

すべてが完璧に動作します：今、別に私は次のように私のAJAX呼び出しのステータスを扱うDOM準備にいくつかのイベントをフックアップしている

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

#loadingモーダルダイアログ - IT負荷と#loading閉じ、dialogDivモーダルは を開きます - 私は提出クリックして#loadingがdialogDiv の上に開きます - それが完了し、jGrowl通知を受け取ったとき

最後に、POSTが完了して​​が呼び出されてコンテンツが更新されると、#loadingモーダルが実行されます再び表示されません。

基本的に.ajaxStart()は発砲していません。何故かはわからない。

最初に、送信ボタンのクリックイベントで行われたajax投稿にsuccess関数を書きました。その後、私はcompleteが良いかもしれないことに気づいた。

他のライブの.ajax()コールが完了したあと、refresh（）を呼び出して​​を呼び出しても、.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 */ 
}); 

ご希望の場合は、これが役立ちます。