Ajax to call another Ajax function upon done

Question

var App = {
actionRequest: function (url,data,callback){
    var that = this;
    $('#menu').panel('close');
    $.mobile.loading('show');
    $.when(

        $.ajax({
            method: 'POST',
            url: url + '?' + new Date().getTime(),
            data: data
        })            

    ).done(function(data,html) {        
            that.refreshCart();
            $.mobile.loading('hide');               
        }

    );
}

refreshCart: function(){        
    App.loadExternalContent('content','scripts/data_ajax.php','action=getCart','templates/cart.htm');
    }
}

I need to call refreshCart in ".done". How can i write a callback function in ".done" to do so? Sorry i am new with Ajax.

Answer 1

var object = {
  actionRequest: function(url, data, callback) {
    $('#menu').panel('close');
    $.mobile.loading('show');
    $.ajax({
      method: 'POST',
      url: url + '?' + new Date().getTime(),
      data: data
    }).done(function(data, html) {
        if ($.isFunction(callback)) {
          callback();
        }
        $.mobile.loading('hide');
      }
    );
  }
}

usage:

if refreshCart is function in the object you can also do this:

var object = {
    actionRequest: function(url, data, callback) {
      var that = this;

      $('#menu').panel('close');
      $.mobile.loading('show');
      $.ajax({
            method: 'POST',
            url: url + '?' + new Date().getTime(),
            data: data
          }).done(function(data, html) {
              // without using a callback
              that.refreshCart();
              $.mobile.loading('hide');
            }

          );
        },
        refreshCart: function() {
          App.loadExternalContent('content', 'scripts/data_ajax.php', 'action=getCart', 'templates/cart.htm');
        }
    }

Here is an example of how to use ajax requests

 $.ajax({ url: 'http://echo.jsontest.com/title/ipsum/content/blah', method: 'GET' }) .done(function(response) { console.log(response); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

I am assuming you are referring this code in class.

actionRequest: function (url,data,callback){
    var self = this;  //keep reference of current instance for more info read closures in JS
    $('#menu').panel('close');
    $.mobile.loading('show');
    $.when(

        $.ajax({
            method: 'POST',
            url: url + '?' + new Date().getTime(),
            data: data
        })            

    ).done(function(data,html) {        
            self.refreshCart(); 
            $.mobile.loading('hide');               
        }

    );
}

refreshCart: function(){        
    App.loadExternalContent('content','scripts/data_ajax.php','action=getCart','templates/cart.htm');
}

Answer 3

Ajax function:

actionRequest: function (url,data,callback){
    $('#menu').panel('close');
    $.mobile.loading('show');
    $.when(

        $.ajax({
            method: 'POST',
            url: url + '?' + new Date().getTime(),
            data: data
        })            

    ).done(function(data,html) {        
            callback();
            $.mobile.loading('hide');               
        }

    );
}

call function:

actionRequest(url, data, refreshCart);