MVC＆jQuery＆Ajax：等待JavaScript被加載

我使用的是ASP.NET MVC和jQuery，我通過Ajax加載了一個PartialView。一個獨立的JavaSriptFile屬於這個PartialView。成功時，將返回html插入到DOM中。在JavaScript中，一些東西已經完成，並且可能需要一點時間。加載的內容然後顯示在對話框中。MVC＆jQuery＆Ajax：等待JavaScript被加載

簡化代碼：

1 $.ajax({ 
2 url: /user/edit, 
3 dataType: 'html', 
4 data: { id: 1 }, 
5 success: function (htmlCode) { 
6  $('#dialogEditUser').html(htmlCode); 
7  $('#dialogEditUser').dialog('open'); 
8 }); 
9 };

此代碼的工作，有時沒有，這取決於PartialView的JavaScript的速度有多快執行。所以有時候，對話框不會打開。所以我改行號7：;

7  setTimeout(function() { $j('#dialogEditUser').dialog('open') }, 250);

現在一切工作正常。但是這個「黑客」並不是很合適。我如何檢查PartialView的JavaScript是否已經在加載的內容上執行？是否有可能沒有辦法返回一個完全呈現PartialView（這樣的JavaScript已經執行，我得到了AjaxCall的回報？

來源

2011-10-28 iappwebdev

默認情況下，阿賈克斯將不會等待請求完成。
嘗試設置async選項假：在docs

來源

2011-10-28 14:57:17 matino

這就是我一直在尋找。事實上，我已經嘗試過那個。但是，部分視圖中的js-File是由jQuery.getscript（）加載的，默認情況下它的async屬性爲true。所以我將這個調用改爲jQuery.ajax（）並將false設置爲異步，但我不必更改原始的ajax調用。所以最後，我有一個ajax調用選項async = false包裝在一個ajax調用選項async = true。問題：你如何解決這類問題？ – iappwebdev

$.ajax({ 
    url: /user/edit, 
    dataType: 'html', 
    async: false, 
    data: { id: 1 }, 
    success: function (htmlCode) { 
     $('#dialogEditUser').html(htmlCode); 
     $('#dialogEditUser').dialog('open'); 
    }); 
};

更多細節儘量包裝代碼就緒塊：

$(document).ready(function(){ 
    $.ajax({ 
    url: /user/edit, 
    dataType: 'html', 
    data: { id: 1 }, 
    success: function (htmlCode) { 
     $('#dialogEditUser').html(htmlCode); 
     $('#dialogEditUser').dialog('open'); 
    }); 
    }; 
});

'#dialogEditUser'可能在調用成功回調時加載。

來源

2011-10-28 14:59:15 arb

對不起，我應該發佈了js-File這個洞。當然一切都在$（document）.ready-Call之後處理。 – iappwebdev

爲什麼不讓$('#dialogEditUser').dialog('open');在您正在加載的js中？通過這種方式，您可以知道相應的js已加載

來源

2011-10-28 15:00:12

這完全使我的答案更有意義。不知道爲什麼我過於複雜。 +1 –

好主意，但這是不可能的，因爲加載的局部視圖並不總是用作對話框。我的問題是一般'等待加載的JavaScript腳本'，因爲我的解決方案中有其他情況下，我必須等待一個Ajax調用JavaScript的加載後。 – iappwebdev

因此，讓我們想象插入部分視圖後的代碼與它無關，但必須在插入後執行。如何實現這一目標？我不想按照Galled在回答3中所建議的那樣修改DOM。必須有一個合適的方法來等待以前的JavaScript被加載和執行。也許作爲回調函數？或全球腳本註冊商？ – iappwebdev

如果在部分視圖結束時獲得了具有特定id的元素，如#finishLoad。爲什麼不試試這個？

var waitToOpenDialog = function(){ 
    var jFinish = $('#finishLoad'); 

    if(jFinish.length<=0){ 
     setTimeout(waitToOpenDialog, 10); 
    }else{ 
     $('#dialogEditUser').dialog('open'); 
    } 
} 

$.ajax({ 
    url: /user/edit, 
    dataType: 'html', 
    data: { id: 1 }, 
    success: function (htmlCode) { 
     $('#dialogEditUser').html(htmlCode); 
     waitToOpenDialog(); 
    }); 
};

那麼，如果你不能修改DOM或沒有像#finishLoad任何ID，你不能嘗試（保持異步=真）與（或多或少）這樣的：

var waitToOpenDialog = function(){ 
    var jDialogUser= $('#dialogEditUser'); 

    if(jDialogUser.html().length<=0){ 
     setTimeout(waitToOpenDialog, 10); 
    }else{ 
     jDialogUser.dialog('open'); 
    } 
} 

$.ajax({ 
    url: /user/edit, 
    dataType: 'html', 
    data: { id: 1 }, 
    success: function (htmlCode) { 
     $('#dialogEditUser').html(htmlCode); 
     waitToOpenDialog(); 
    }); 
};

或者你可以嘗試完整：

$.ajax({ 

     url: /user/edit, 
     dataType: 'html', 
     data: { id: 1 }, 
     success: function (htmlCode) { 
      $('#dialogEditUser').html(htmlCode); 
     }, 
     complete: function(){ 
      $('#dialogEditUser').dialog('open'); 
     } 
)};

來源

2011-10-28 15:12:06 Galled

這也是一個解決方案，但即時通訊我認爲不是解決這個問題的好方法。修改DOM成本的時間，我想解決這個問題，而不必修改DOM。 – iappwebdev

添加更多選項。 – Galled

MVC＆jQuery＆Ajax：等待JavaScript被加載

回答

相關問題