Chaining methods that have on your body ajax call

Question

I have this class:

function Clazz() {
this.id;
this.description;
}

Clazz.prototype._insert = function(_description, _success, _error) {

this.description = _description;

$.ajax({
    type : "PUT",
    url : "api/route",
    data : JSON.stringify(this),
    dataType : "json",
    contentType : "application/json;charset=UTF-8",
    success : function() {
        _success($("#message"), 'OK');
    },
    error : function() {
        _error($("#message"), 'FAIL');
    }
});
};

Clazz.prototype._findAll = function(_callback) {

$.ajax({
    type : "GET",
    url : "api/route",
    dataType : "json",
    success : function(data) {
        _callback(data);
    }
});
};

On the button click, I have this:

var clazz = new Clazz();
clazz._insert($("#description").val(), success, error);
clazz._findAll(loadCallback);

Below the loadCallback method:

function loadCallback(data){
    var oTable = $('#table').dataTable({
        "bRetrieve": true,
        "bDestroy" : true,
        "bFilter" : false,
        "bLengthChange" : false,
        "bInfo" : false,
        "sDom" : "<'row'<'span5'l><'span5'f>r>t<'row'<'span5'i><'span5'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sProcessing" : "Loading ...",
            "sZeroRecords" : "No records",
            "oPaginate" : {
                "sNext" : "",
                "sPrevious" : ""
            }
        },
        "iDisplayLength" : 4,
        "aaData" : data,
        "aoColumnDefs" : [ 
                     { "aTargets" : [0], "mData" : "description", "sTitle" : "My Data" },

                     { "aTargets" : [1], 
                            "sWidth" : "20px",
                            "mData" : "id", 
                            "bSortable" : false,
                            "mRender" : function ( data ) {
                                    return '<a href="#" name="route-' + data + '" route="' + data + '"><img src="img/img01.png" style="height: 20px; width: 20px;"/></a>';
                            }
                         },
                         { "aTargets" : [2], 
                            "sWidth" : "20px",
                            "mData" : "id", 
                            "bSortable" : false,
                            "mRender" : function ( data ) {
                                    return '<a href="#" name="route-' + data + '" route="' + data + '"><img src="img/img02.png" style="height: 20px; width: 20px;"/></a>';
                            }
                         },
                     { "aTargets" : [3], 
                            "sWidth" : "20px",
                            "mData" : "id", 
                            "bSortable" : false,
                            "mRender" : function ( data ) {
                                    return '<a href="#" name="route-' + data + '" route="' + data + '"><img src="img/img03.png" style="height: 20px; width: 20px;"/></a>';
                            }
                         }
                     ],
        "fnHeaderCallback" : function( nHead ) {
            $(nHead.getElementsByTagName('th')[0]).attr("colspan","4");
            for(var i = 1; i <= 3; i++){
                $(nHead.getElementsByTagName('th')[1]).remove();
            }
        },
        "fnRowCallback" : function( nRow ) {
                $(nRow.getElementsByTagName('td')[1]).attr("width","20px");
                $(nRow.getElementsByTagName('td')[2]).attr("width","20px");
                $(nRow.getElementsByTagName('td')[3]).attr("width","20px");
        }

    });
    oTable.fnClearTable();
    oTable.fnAddData(data);
    oTable.fnDraw();
}

I want that the method clazz._findAll(loadCallback); only execute after the clazz._insert finish.

I already tried $.when but it did not work.

Answer 1

I solved doing this:

1. Putting return $.ajax(...stuff...) in the insert method

2. Using

   $.when(clazz._insert($("#description").val())).done(
       function(){
           clazz._findAll(loadCallback);
       }
   );
   

I had to call the _findAll inside an anonimous function.