Holly Marie Batchelor Holly Marie Batchelor - 6 days ago 4
Ajax Question

Retrieving the index of deferred jquery ajax request using .when.apply()

I have a list of objects, the amount of which unknown that I would like to pass to partial views using ajax posts. The partial view is just a basic table that displays the data how I wish in each partial view. I can do this fine, the problem is, that I would like each partial view to be inside individual div elements because I want to incorporate drag and drop and I think for this I will need to know the div id of the drop? (Correct me if I am wrong here).

This means that I need to firstly dynamically create the divs and assign them their id's using a loop

.each()
and incrementing the id number. I know that I need to use the
.append()
function here and it creates the divs perfectly, naming them correctly.

Now the issue is that I wish to perform an ajax post request to my partial view action for each of the div elements created and I want to change the html to the partial view response. I realise that the ajax calls are asynchronus which is why at first only the last div was updating so I put all the requests in an array and used the
.when.apply().then()
to change the div's html. However I don't know the id of the div to change; I thought that if I could get the index of the current item in the array that I could use that but I am not sure how to get it.

Can someone please look at my code and tell me if I am overcomplicating this or how I can get the index of the div I need to set the html for?

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


Edited previous attempt Outcome is that it keeps overwritting the last div element

<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

Your second lot of code is closer to working. you just needed to wrap the Ajax call code in an IIFE to keep the value of the divid when the success fires. You do not need the promises in this instance:

e.g. something like this:

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