.when.apply（）を使用した遅延jquery ajaxリクエストのインデックスの取得

Question

私は、ajax投稿を使用して部分的なビューに渡したい不明な量のオブジェクトのリストを持っています。パーシャルビューは、各パーシャルビューでどのようにデータを表示するかを示す基本的なテーブルです。私はこれをうまくやることができます。問題は、ドラッグ＆ドロップを取り入れたいので、個々のdiv要素の中に各部分的なビューを入れることです。ドロップのdiv idを知る必要があるでしょうか？ （私がここに間違っているなら私を訂正してください）。

これは、最初にdivを動的に作成し、ループID番号をインクリメントしてループ.each()を使用してIDを割り当てる必要があることを意味します。私はここで.append()関数を使用する必要があることを知っており、divを完全に作成して正しく名前を付けます。

ここで問題は、作成されたdiv要素ごとに部分表示操作にajax投稿要求を実行し、部分ビュー応答にhtmlを変更することです。私は、ajax呼び出しは非同期であることに気付きました。最初は最後のdivのみが更新されていましたので、すべての要求を配列に入れ、divのhtmlを変更するのに.when.apply().then()を使用しました。しかし私は変更するdivのidを知らない。私はそれを使用することができる配列の現在の項目のインデックスを得ることができればそれを得る方法がわからないと思った。

誰かが私のコードを見て、私がこれを過度に複雑にしているかどうか、またはHTMLの設定が必要なdivのインデックスを取得する方法を教えてください。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var modelData = [@Html.Raw(Json.Encode(Model.mappings))][0]; 
     var divid; 
     var ajaxrequests = []; 
     $.each(modelData, function (i, item) { 
      divid = 'header' + i; 
      $('#HeaderData').append('<div id="' + divid + '">Hello</div>'); 
      ajaxrequests.push($.ajax({ 
       url: "HeaderFieldMapping", 
       type: "POST", 
       data: JSON.stringify(item), 
       contentType: "application/json; charset=utf-8", 
       dataType: "html" 
      })); 
     }); 
     $.when.apply($, ajaxrequests).then(function (resultdata) { 
      divid = 'header' + [index???]; 
      $('#' + divid).html(resultdata); 
     }); 
    }); 
</script> 

編集前の試行アウトカムは、それが保持していることである

<script type="text/javascript"> 
    function rowDropHandler(args) { 
     var item = args.data[0]; 
     alert(item); 
    } 
    $(document).ready(function() { 
     var modelData = [@Html.Raw(Json.Encode(Model.mappings))][0]; 
     var divid; 
     var ajaxrequests = []; 
     var intnum = 0; 
     $.each(modelData, function (i, item) { 
      divid = 'header' + i; 
      $('#HeaderData').append('<div id="' + divid + '">Hello</div>'); 
      ajaxrequests.push($.ajax({ 
       url: "HeaderFieldMapping", 
       type: "POST", 
       data: JSON.stringify(item), 
       contentType: "application/json; charset=utf-8", 
       dataType: "html", 
       success: function(resultdata){ 
        $('#' + divid).html(resultdata); 
      } 
      })); 
     }); 
     $.when.apply($, ajaxrequests).then(function (resultdata) { 
      alert('done' + resultdata); 
     }); 
    }); 
</script> 

Answer 1

、あなたは一人ひとりの約束のためのarguments擬似配列の個別のエントリを取得します。これらのエントリのそれぞれは、successハンドラの3つの標準パラメータの配列になります。

は、したがって、あなたは、単にその配列を反復して、HTMLに記入することができます

$.when.apply($, ajaxrequests).then(function() { 
    [].forEach.call(arguments, function(result, index) { 
     var divid = 'header' + index; 
     var resultdata = result[0]; 
     $('<div>', {id: divid, html: resultdata}).appendTo('#HeaderData'); 
    }); 
}); 

P.S.代わりに.each/pushループの約束の配列に要素のあなたの配列を変換するArray.prototype.mapを使用することを検討してください：個々のAJAX要求に作業を行うために

var ajaxrequests = modelData.map(function(item, index) { // NB: index unused 
    return $.ajax({ 
     url: "HeaderFieldMapping", 
     type: "POST", 
     data: JSON.stringify(item), 
     contentType: "application/json; charset=utf-8", 
     dataType: "html" 
    }); 
}); 

Answer 2

最後のdiv要素をoverwrittingコードのあなたの第2のロットは作業に近いです。成功が発生したときに、分割の価値を維持するために、AFEのコール・コードをIIFEでラップするだけで済みました。この場合、約束は必要ありません。

このような何か：あなたの最初の$.whenベースのバージョンで

$(function() { // <<< Shortcut for DOM ready handler 
    var modelData = [@Html.Raw(Json.Encode(Model.mappings))][0]; 
    var divid; 
    var intnum = 0; 
    $.each(modelData, function(i, item) { 
    divid = 'header' + i; 
    $('#HeaderData').append('<div id="' + divid + '">Hello</div>'); 
    (function(divid) { 
     $.ajax({ 
      url: "HeaderFieldMapping", 
      type: "POST", 
      data: JSON.stringify(item), 
      contentType: "application/json; charset=utf-8", 
      dataType: "html", 
      success: function(resultdata) { 
      $('#' + divid).html(resultdata); 
      } 
     ) 
     }(divid); 
    }); 
    }); 
});