Here is my function:
loadChildNodes($('#budgetline' + id)); $('.child-of-budgetline' + id).each(function(){ $(this).expandTreeNode(); console.log("test"); }); loadChildNodes($element) function makes an ajax call. I want to wait until this function is completed and then only execute the lines after it. But doesnot happen so. How can i make the other lines execute only after the function loadChildNodes has completed.
use a promise available by deferred objects:
$.when(loadChildNodes($('#budgetline' + id))).done(function() { $('.child-of-budgetline' + id).each(function(){ $(this).expandTreeNode(); console.log("test"); }); }) .fail(function() { /* some errors occured */ }) To properly work loadChildNodes() should return either a promise (to resolve on ajax success callback and reject on error callback) or the ajax object itself ($.ajax or other shortcut, like $.get, $.post...)
Use $.when().then() to do stuff once AJAX completes, e.g:
$.when(loadChildNodes($('#budgetline' + id))).then(function() { //stuff }); 
loadChildNodes - right?
ajaxObject. But be warned that success() is being deprecated in favour of done() see api.jquery.com/jQuery.ajaxIntroduce a callback parameter for loadChildNodes and call that callback in the success callback of ajax call inside that method.
Now refactor your code in way that the remaining lines of code will be moved to callback and passed to loadChildNodes method.
loadChildNodes($('#budgetline' + id), function() { $('.child-of-budgetline' + id).each(function(){ $(this).expandTreeNode(); console.log("test"); }); }); You'll need to return the ajax call as an object :
loadChildNodes($('#budgetline' + id)).done(function() { $('.child-of-budgetline' + id).each(function(){ $(this).expandTreeNode(); console.log("test"); }); }); function loadChildNodes(elem) { return $.ajax({ //do ajax }); } 
loadChildNodesfunction too? What does it return?loadChildNodes($element)returns anything? can you post the code of this method?