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
Post a Comment