javascript - $.when().then() not working with nested ajax calls -

i have been trying scroll page dynamic div created ajax call.

when #divnotifications div clicked (below), make first ajax call adds post details, within ajax call, ajax call made add related comments div.

the part explained far works great. then, use $.when().then() scroll div item created based on ajax calls. however, page not scroll element created loadcommentsforpost ajax call.

did logic of $.when().then() wrong?

    $(document).on('click', '#divnotifications div', function (event) {           event.preventdefault();           $.ajax({               //other details               success: function (postid) {                   $.when(displaypostwithfulldetails(postid)).then(function () {                                                   //scroll content created                        //loadcommentsforpost function nested                        //inside displaypostwithfulldetails                   });               }           });                     });      function displaypostwithfulldetails(postid) {          $.ajax({             //other details             success: function (post) {                 //the code build div display post -- working fine                 loadcommentsforpost(post.postid);                              }         });     }      function loadcommentsforpost(postid) {         $.ajax({             //other details             success: function (response) {                 var comments = json.parse(response);                 displaycomments(comments);//builds div display comments - working fine             }         });     } 

updated code

after receiving feedback, ended following code. however, still not working. works if add delay make sure div loaded:

    $(document).on('click', '#divnotifications div', function (event) {         event.preventdefault();         $.ajax({             //other ajax stuff              success: function (postid) {                   displaypostwithfulldetails(postid).done(function () {                           settimeout(function () {                               var scrollto = $("div[data-" + type.tolowercase() +  "displayform='" + relateditem + "']").offset().top;                               $("html, body").animate({ scrolltop: scrollto }, 600);                           }, 500);                   });              }         });     });      function displaypostwithfulldetails(postid) {         jquery.support.cors = true;         return $.ajax({             //other ajax stuff             success: function (post) {                 post = json.parse(post);                 //display post details                  loadcommentsforpost(post.postid);             }         });     }      function loadcommentsforpost(postid) {         var promise = new $.deferred();         jquery.support.cors = true;         $.ajax({             //other ajax stuff             success: function (response) {                 var comments = json.parse(response);                 displaycomments(comments);//this not ajax                   promise.resolve('loadedcomments');             }         });          return promise;     } 

did logic of $.when().then() wrong?

no, not returning promise can't use promise functions .then().

update:

i use $.when().then() scroll div item created based on ajax calls. however, page not scroll element created loadcommentsforpost ajax call.

for me means need wait both ajax calls resolved.

this fiddle show how should work emulating ajax call using settimeout fiddle.

your code may similar to:

function displaypostwithfulldetails(postid) {    var promise = new $.deferred();    $.ajax({        //other details         success: function (post) {            //the code build div display post -- working fine            loadcommentsforpost(post.postid).then(function() {                promise.resolve();            });                          }     });     return promise; }  function loadcommentsforpost(postid) {     return $.ajax({         //other details         success: function (response) {             var comments = json.parse(response);             displaycomments(comments);//builds div display comments - working fine         }     }); } 

now when execute function displaypostwithfulldetails return promise. can use .then() method;

displaypostwithfulldetails(postid)).then(function () {}); 

or...

var promise = displaypostwithfulldetails(postid); promise.then(function(data){}); 

also major advantage of use $.when() can execute .then() method when promises pass resolved.

there not need use when waiting single promise.