jquery - ajax call in each loop functions as not expected -


i have function output array named displaycomments(comments). within function, make ajax call retrieve replies associated comments.

when ajax run retrieve replies, after array returned web api controller, code jumps out of ajax , go last line of each loop, $('#div_listofcomments').append(replies);. goes first line of loop, var cid = comment.commentid; , continue next comment item. then, ajax call happens second comment, , behaves same way. never visits success status of ajax call until each loop completed comments. then, moves success section , runs code once each reply item display them on form.

however, need attach replies under each comment, in other words, need append replies $('#div_listofcomments') after comment appended. however, code illustrated below not function in expected way. appends comments. appends replies. can see wrong code below ?

    function loadcommentsforpost(postid) {         jquery.support.cors = true;         $.ajax({             url: '/api/comment/getcommentsbypost?pid=' + postid,             type: 'get',             contenttype: "application/json; charset=utf-8;",             datatype: 'json',             success: function (response) {                               },             error: function (x, y, z) {                 alert(x + '\n' + y + '\n' + z);             },             complete: function (jqxhr, textstatus) {                 var comments = json.parse(jqxhr.responsetext);                 comments = comments["$values"];                 displaycomments(comments);             }         });     }      function displaycomments(comments) {          $('#div_listofcomments').html('');         $.each(comments, function (index, comment) {             //the current comment appended $('#div_listofcomments')              var cid = comment.commentid;             var replies;             $.ajax({                 url: '/api/reply/getrepliesbycomment?cid=' + cid,                 type: 'get',                 contenttype: "application/json; charset=utf-8;",                 datatype: 'json',                 success: function (response) {                     //vs break-point works before here                     //and see valid return value vs                     //the program continue work outside of ajax                     //with line below: $('#div_listofcomments').append.....                 },                 error: function (x, y, z) {                     alert(x + '\n' + y + '\n' + z);                 }             });              $('#div_listofcomments').append(replies);         });     } 

john right. also, i'll suggest change use of cascated ajax calls. can use deferred/promise approach.

your code this

function loadcommentsforpost(){      jquery.support.cors = true;      return $.ajax({          url: '/api/comment/getcommentsbypost?pid=' + postid,          type: 'get',          contenttype: "application/json; charset=utf-8;",          datatype: 'json'      });  }  function loadcommentsforposterror(x, y, z) {      alert(x + '\n' + y + '\n' + z);  }  function retrievedcomments(jqxhr, textstatus)  {      var comments = json.parse(jqxhr.responsetext);      comments = comments["$values"];      displaycomments(comments);  }  function displaycomments(comments) {      $('#div_listofcomments').html('');      $.each(comments, function (index, comment) {          var cid = comment.commentid;            // append comment $('#div_listofcomments').          // append empty div $('#div_listofcomments') hold replies,          // giving id based on cid.            $.ajax({              url: '/api/reply/getrepliesbycomment?cid=' + cid,              type: 'get',              contenttype: "application/json; charset=utf-8;",              datatype: 'json',              success: function (response) {              // put replies in div id based on cid.              // cid have correct value because closure.              }          });      });  }    $.when(loadcommentsforpost()).then(retrievedcomments, loadcommentsforposterror);

more @ $.when documentation


Comments

Popular posts from this blog

java - Could not locate OpenAL library -

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

sorting - opencl Bitonic sort with 64 bits keys -