c# - $.ajax and .each in JQuery, with MVC, isn't asynchronous -


my ajax calls don't seem asynchronous when wrapped inside .each loop, instead seem wait each finish before calling next 1 ..

mvc c#:

   [httppost]     public jsonresult doactiongetnextstep(jsonsubmission submission)     {         somestruct body = new somestruct();         datetime start = datetime.now;         try         {         system.threading.thread.sleep(5000);         body.html= "there, done";         }         catch (exception e)         {         body.html= "there error: "+e.message;         }         timespan s = datetime.now - start;         ast.html = body.html+ "<p> c# took " +s.seconds +"s</p>";         return json(body);     }   

jquery:

function doactions(targets) { $(targets).each(function () { doaction($(this)); }); }  function doaction(target) { var parent = $(target).parents('div.actionreplaceable'); var jsonsubmission = { data : "somedata" }; var submission = json.stringify(jsonsubmission, null, 2);  $.ajax({     type: 'post',     url: '/main/doactiongetnextstep',     data: submission,     async: true,     contenttype: 'application/json; charset=utf-8',     datatype: 'json',     success: function (result) {         var html = result.html;         $(parent).html(html);     },     error: function (xmlhttprequest, textstatus, errorthrown) {         $(parent).html("jquery error: " + textstatus + "\n" + errorthrown);     } }); } 

this ends taking 25 seconds 5 elements, each of them reporting call took 5 seconds. thought ajax calls asynchronous, operation should take 5 seconds total? both server , browser running on localhost. can spot i'm missing?

your requests should asynchronous. check console.log in appropriate places see when things happen.

$(targets).each(doaction);  function doaction() {   var $parent = $(this).parents('div.actionreplaceable'),       jsonsubmission = { data : "somedata" };    console.log("sending request " + this-id);    $.ajax({     type        : 'post',     url         : '/main/doactiongetnextstep',     data        : json.stringify(jsonsubmission, null, 2),     contenttype : 'application/json; charset=utf-8',     success     : function (result) {       console.log("received response " + this-id);       $parent.html(result.html);     },     error       : function (xmlhttprequest, textstatus, errorthrown) {       console.log("received error " + this-id);       $parent.html("jquery error: " + textstatus + "\n" + errorthrown);     }   }); } 
  • there no need target parameter. jquery sets this correctly callback functions.
  • once got rid of target parameter need pass function reference .each().
  • unless return type json (seems html here), setting datatype: 'json' wrong.
  • setting async: true superfluous unless configured global ajax options async: false. hope did not.

Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -