Jqueryがロードされていないような部分的なビュー

Question

mvcで部分的なビューを読み込む際に問題があります。私はjqueryとそれは仕事の種類でビューを読み込もうとしています。適切な情報で満たされた2つのdivを表示するか、または4つのdivで表示されたdivを表示します。しかし、それはアレイ全体をループするので、パラメターが変化し、警告が表示されます。

プロセスまたはスレッドは、Iが4つの値で満たされ、私はのActionResultでのparamaterとしてそのリスト内の値を必要としているのjQueryの配列を有していて、最後のステップ

以降に変更されています。

コードIは

public ActionResult TvShow(string channel) 
    { 
     var model = un.SortAllPrograms(channel); 
     return PartialView("TvShow", model); 
    } 

とjQuery有する

$(document).ready(function() { 
var nameOfChannel = ["TV3", "TV4", "TV6", "TV8"]; 
debugger 
$.each(nameOfChannel, function (index, value) { 
    $('.showContainer').append('<div class="number">' + value + '</div>'); 
    $('.number').load('Home/TvShow', { channel: value }); 
}); 

}）。

私は本当にこの作業を行う方法に関するいくつかの助けやアドバイスをいただきありがとうございます。

Answer 1

問題は、各ajax呼び出しで、クラスnumberのdivにajx呼び出しの応答をロードしていることです。したがって、最後の応答を取得するajax呼び出しは、そのcssクラスを持つすべてのdivのを更新するために使用されます。これは、同じ応答を持つ複数のdivが時間どおりに表示されている理由ですが、サーバが応答するまでに時間がかかっているたびにランダムになります。場合によっては、TV6の呼び出しが時間がかかるものになります。 ajaxは非同期であるため、応答が返ってくると、numberの利用可能なすべてのdivがその時点でに更新されます。あなたのループは2回目の反復を実行している可能性があるので、そのCSSクラスに2つのdivしか存在しないので、2つのdivだけが更新されます。

理想的には、ループしている配列の特定の目的のために作成されたdivにロードしたいと思っています。

これはそれを行う必要があります。

$(function() { 

    var nameOfChannel = ["TV3", "TV4", "TV6", "TV8"]; 

    $.each(nameOfChannel, function (index, value) { 
     var $d = $("<div class='number'>") 
             .load('@Url.Action("TvShow")',{ channel: value }); 
     $('.showContainer').append($d); 
    }); 


}); 

現在のアプローチでは、n回の呼び出し（nは配列のサイズ）を行うことに注意してください。配列をパラメータとして送信し、すべての項目のマークアップを返すことができる単一の呼び出しを行い、1回の呼び出しで終了することを検討することもできます。あなたのユースケースをより理にかなった方法を使用してください。