MVC＆jQuery＆Ajax：JavaScriptがロードされるのを待ちます。

Question

ASP.NET MVCとjQueryを使用していて、Ajax経由でPartialViewをロードしています。このPartialViewには、別個のJavaSriptFileが属しています。成功すると、戻りHTMLはDOMに挿入されます。 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が読み込まれたコンテンツで実行されたかどうかを確認するにはどうすればよいですか？ JavaScriptはすでに実行されていたので、私はAjaxCallのリターンを得るどこ？

Answer 1

デフォルトのアヤックスでは、要求が終了するのを待つことはありません（完全にレンダリングPartialViewを返すためにどのような方法は、多分そこにある。
は、asyncオプションを設定してみてくださいfalseに：docs

Answer 2

で

$.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'がまだロードされていない可能性があります。

Answer 3

なぜあなたはロード中の$('#dialogEditUser').dialog('open');を作りませんか？呼び出しが行われると、対応するjsが既にロードされていることがわかります

Answer 4

部分ビューの最後に、＃finishLoadのような特定のIDを持つ要素があるとします。なぜこれを試してみませんか？

まあ

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