.when.apply()를 사용하여 지연 jquery 아약스 요청 인덱스 검색

Question

아약스 게시물을 사용하여 부분 뷰에 전달할 알 수없는 양의 개체가 있습니다. 부분 뷰는 각 부분 뷰에서 원하는대로 데이터를 표시하는 기본 테이블 일뿐입니다. 내가 잘 할 수있는, 문제는, 내가 각 부분보기를 개별 div 요소 안에 넣고 싶습니다. 드래그 앤 드롭을 통합하고 싶기 때문에 드롭의 div ID를 알아야 할 필요가 있다고 생각합니까? (내가 틀렸다면 나를 바로 잡아라.)

즉, 먼저 div를 동적으로 만들고 해당 ID에 루프 .each()을 추가하고 ID 번호를 증가시켜야합니다. 여기에 .append() 함수를 사용해야한다는 것을 알고 div를 완벽하게 만들고 올바르게 이름을 지정합니다.

이제 div 요소 각각에 대해 부분보기 동작에 대해 ajax 게시 요청을 수행하고 html을 부분보기 응답으로 변경하려고합니다. 나는 아약스 호출이 비동기식이라는 사실을 깨닫는다. 그 이유는 처음에는 마지막 div 만 업데이트했기 때문에 모든 요청을 배열에 넣고 .when.apply().then()을 사용하여 div의 html을 변경했다. 그러나 나는 변화시킬 div의 이드를 모른다. 나는 내가 사용할 수있는 배열에서 현재 항목의 색인을 얻을 수 있다면 그것을 얻는 방법을 모르겠다 고 생각했다.

누구든지 내 코드를보고 내가 이것을 복잡하게 만들었는지 아니면 내가 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

첫 번째 $.when 기반 버전에서는, 당신은 약속 각자의 arguments 의사 배열에 별도의 항목을 얻을 것이다. 이러한 항목 각각은 success 핸들러의 세 가지 표준 매개 변수의 배열이됩니다.

은 그러므로 당신은 단순히 해당 배열을 반복하고 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'); 
    }); 
}); 

추신 각`$ .ajax` 호출 내에서`success` 핸들러 함수를 추가

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 유지한다는 것이다. 성공할 때 배당금의 가치를 유지하기 위해 IIFE에 Ajax 콜 코드를 래핑해야했습니다. 이 경우에는 약속이 필요하지 않습니다.

예 : 이 같은 :

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