Delay execution of a function until completion of another using jQuery when method

Question

I am trying to delay the execution of a jQuery function from the jstree plugin until another function (which replaces the target html id) is completed using jQuery when method. However, the following script doesn't seem to do it right.

The idea is that to let the loadxml() function finishes populating the HTML tree then execute the jstree() function to apply the treeview.

Here is the HTML

      <div id="jstree" class= "col-md-6 col-xs-6"></div>

the script

          $.when(loadxml()).then(function(){

                 $('#jstree').jstree();

           });



function loadxml(){

$.ajax({

    url: "xml/categories.xml",
    dataType: "xml",
    success: function(catxml){
        var categories = new Array();
        var outputDisplay = "";

        $(catxml).find("Categories").each( function(){
            var cid = $(this).find("CategoryID").text();
            var cname = $(this).find("CategoryName").text();
            var cdescription = $(this).find("Description").text();

            categories.push([cid,cname,cdescription]); 
        }); 

        $.ajax({
            url: "xml/products.xml",
            dataType: "xml",
            success: function(prodxml){

                var products = new Array();

                $(prodxml).find("Products").each(function(){
                    var pid = $(this).find("ProductID").text();
                    var pname = $(this).find("ProductName").text();
                    var pcatid = $(this).find("CategoryID").text();
                    var pquantity = $(this).find("QuantityPerUnit").text();
                    var pprice = $(this).find("UnitPrice").text();

                    products.push([pid,pname,pcatid,pquantity,pprice]);                     
                });            

                outputDisplay += "<ol class='no-bullet'><li>Product List<ol type='i'>"

                for(i=0; i<categories.length; i++){

                    outputDisplay += "<li>" + categories[i][1] + "<ol type='a'>";

                    for(x=0; x<products.length; x++){

                        if(categories[i][0] == products[x][2]){

                            outputDisplay += "<li>" + products[x][1] + "</li>";                            

                        }

                    }

                    outputDisplay +="</ol></li>";

                }

                document.getElementById("jstree").innerHTML = outputDisplay;


            }
       });




    }    
});

}

Answer 1

Promises:

loadxml().then(function() { 
    $('#jstree').jstree(); 
});

function loadxml(){

  return $.ajax({/* parameters */})
          .then(function(catxml) {
             //code that runs on the result of the first ajax request

             //return the promise from the next ajax request
             return $.ajax({/* parameters */})
           })
           .then(function(prodxml) {
               //code that runs on the result of the second ajax request
           });
} 

Answer 2

deffered

        $.when(loadxml()).then(function(){

             $('#jstree').jstree();

       });



function loadxml(){
var deferred = $.Deferred();
  $.ajax({
     success : function(){
        //code
        $.ajax({

          success: function(){
             //your code
             deferred.resolve();

          } 
        })
     }
  })

   return deferred.promise(); 


}    

});