链接方法有你身上的ajax调用

时间:2013-04-04 18:50:08

标签: javascript jquery jquery-datatables jquery-callback

我有这堂课:

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);
    }
});
};

点击按钮,我有:

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

在loadCallback方法下面:

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();
}

我希望方法clazz._findAll(loadCallback);仅在clazz._insert完成后执行。

我已经尝试$.when,但它没有用。

2 个答案:

答案 0 :(得分:0)

如果$.when返回clazz._insert函数调用(它当前没有),

$.ajax应该有效。

如果您返回$.ajax来电,则应该可以执行以下操作:

$.when(clazz._insert(...stuff...)).then(clazz._findAll(...stuff...));

最好仔细检查延迟对象上的documentation

答案 1 :(得分:0)

我解决了这个问题:

  1. return $.ajax(...stuff...)放入插入方法
  2. 使用

    $.when(clazz._insert($("#description").val())).done(
        function(){
            clazz._findAll(loadCallback);
        }
    );
    
  3. 我不得不在一个无穷无尽的函数中调用_findAll