jquery - Redirect after all nested AJAX requests are successful -

i working on feature uses ajax in case uses multiple optional nested ajax requests. cant seem figure out best approach perform redirect after ajax requests successful. idea run main ajax request , in success function call other ajax functions. please bear in mind nested ajax requests optional.

        $.ajax             ({                  type: "post",                  contenttype: "application/json; charset=utf-8",                  data: "{'articlename':'" + webname + "', 'title':'" + titlecontent + "', 'body':'" + content + "', 'categoryid':'" + $('.js-category-select').val() + "'}",                  datatype: "json",                  url: "/internal-service/service.asmx/editblogpost",                                 success: (function (data)                                 {                                     var returnval = data.d;                                      //is there extensions                                     if ($("[data-blog-type-id]").length > 0)                                     {                                         var extensionary = [];                                          $("[data-blog-type-id]").each(function ()                                         {                                             if ($(this).val() != "")                                             {                                                 extensionary.push($(this).attr("data-f-name") + "|" + $(this).val());                                             }                                         });                                          //must bookreview field extensions                                         //send array (if has value)                                         if (extensionary.length > 0)                                         {                                             $.ajax                                                 ({                                                     type: "post",                                                     contenttype: "application/json; charset=utf-8",                                                     data: json.stringify({ articlewebname: webname, extensionary: extensionary }),                                                     datatype: "json",                                                     url: "/internal-service/service.asmx/editblogextensions",                                                     success: (function (data)                                                     {                                                        alert(data.d);                                                     }),                                                     error: (function ()                                                     {                                                         //error                                                         alert("error!");                                                     })                                                 });                                         }                                      }                                      //has rating extension                                     if ($(".js-rating").length > 0)                                     {                                         var ratingval = $(".js-rating").val();                                         $.ajax                                             ({                                                 type: "post",                                                 contenttype: "application/json; charset=utf-8",                                                 data: json.stringify({ articlewebname: webname, rating: ratingval }),                                                 datatype: "json",                                                 url: "/internal-service/service.asmx/editblograting",                                                 success: (function (data)                                                 {                                                     alert(data.d);                                                 }),                                                 error: (function () {                                                     //error                                                     alert("error!");                                                 })                                             });                                     }                                      if (returnval != "error updating blog post")                                     {                                         //return path of article in case title has been changed. page uses title locate article on server                                         alert(returnval + " job!");                                     }                                     else                                     {                                         alert(returnval);                                     }                                 }),                                 error: (function () {                                     //error                                     alert("error!");                                 })                             }); 

in backend (c#) it's pluggable system can create application , can install blog in turn has extensions of different blog types. blog system can have additional plugins i.e rating plugin.

the ajax seems worrying , may suffer scalability issues. ideas appreciated.

so question is, if optional nested ajax requests have been called, how wait them complete , redirect (will redirect same page)?

simplify code using jquery promises.

break code separate functions per load, each return ajax promise.

e.g.

    function postblah() {         return $.ajax({             type: "post",             contenttype: "application/json; charset=utf-8",             data: "{'articlename':'" + webname + "', 'title':'" + titlecontent + "', 'body':'" + content + "', 'categoryid':'" + $('.js-category-select').val() + "'}",             datatype: "json",             url: "/internal-service/service.asmx/editblogpost"         });     } 

you can chain calls then or done or run them in parallel $.when.

     postblah().then(function(datafrompostblah){          step2(datafrompostblah).then(function(datafromstep2){              // etc          });      }); 

this keep top-level code simpler. jquery promises more details.

to pass complex results use $.deferred() create specific promise can resolved own additional data.

e.g.

function domore(parameter){     var def = $.deferred();     // stuff asynchronously         // when result later - resolve promise         def.resolve(mycomplicateddata);     // return promise return complicated data later     return def.promise(); } 

here generic jsfiddle promise testbed put demonstrate basic promise logic (and let play options):

jsfiddle: http://jsfiddle.net/trueblueaussie/nexpe8pt/2/