Извлечение индекса отложенного запроса ajax jquery с использованием .when.apply()

Question

У меня есть список объектов, количество неизвестных которых я бы хотел передать частичным представлениям с помощью сообщений ajax. Частичный вид - это просто базовая таблица, которая отображает данные, как я желаю в каждом частичном представлении. Я могу сделать это хорошо, проблема в том, что я хотел бы, чтобы каждое частичное представление находилось внутри отдельных элементов div, потому что я хочу включить перетаскивание, и я думаю, что для этого мне нужно знать div id падения? (Исправьте меня, если я ошибаюсь здесь).

Это означает, что мне нужно сначала динамически создавать divs и назначать им их идентификаторы, используя цикл .each() и увеличивая число id. Я знаю, что мне нужно использовать функцию .append() здесь, и она отлично создает divs, называя их правильно.

Теперь проблема заключается в том, что я хочу выполнить запрос ajax для моего частичного действия просмотра для каждого из созданных элементов div, и я хочу изменить html на ответ частичного представления. Я понимаю, что вызовы ajax являются асинхронными, поэтому сначала обновлялся только последний div, поэтому я помещал все запросы в массив и использовал .when.apply().then() для изменения html div. Однако я не знаю, как id div должен измениться; Я думал, что если бы я мог получить индекс текущего элемента в массиве, который мог бы использовать это, но я не уверен, как его получить.

Может кто-нибудь, пожалуйста, посмотрите на мой код и скажите мне, не слишком ли я это затрудняюсь или как я могу получить индекс div, который мне нужно установить для html?

<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> 

Отредактированных предыдущая попытка Результата является то, что он держит overwritting последнего элемента Div

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

P.S. рассмотреть возможность использования Array.prototype.map конвертировать массив элементов в массив обещаний, а не в .each/push цикла:

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

Ваших вторые много кода ближе к работе. вам просто нужно было обернуть код вызова Ajax в IIFE, чтобы сохранить значение деления при успешном запуске. Вам не нужны обещания в этом случае:

например. что-то вроде этого:

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