ajax - 当 ajax 调用失败时，如何阻止 Bootstrap x-editable 更新已编辑的字段？

Question

当 ajax 调用失败时，如何阻止 Bootstrap x-editable 更新已编辑的字段？

我正在传递一个函数作为 url。

$('.order-price').editable({
    type: "text",
    title: "Order Price",
    url: function (params) {
        var orderID = $(this).data("order-id");
        var data = "OrderID=" + orderID + "&Price=" + params.value;

        $.ajax({
            type: 'post',
            url: '/Trades/SetOrderPrice',
            data: data,
            async: false,
            error: function (xhr, ajaxOptions, thrownError) {
                return false;
                // Do I return something here instead of false?

            }

        })
    }
});

Answer 1

你有两个选择，要么在回调中抛出异常，x-editable 将自己捕获它，或者你可以使用“成功”事件并在成功函数中返回一个空字符串，然后你就设置好了

Answer 2

最好使用内置的 ajax 调用，它会在出现错误时自动保留旧值：

$('.order-price').editable({
  type: "text",
  title: "Order Price",
  url: '/Trades/SetOrderPrice', 
  params: function (params) {
    return {
      orderID: $(this).data("order-id"),
      value: params.value        
    };
  }
});

Answer 3

error: function (xhr, ajaxOptions, thrownError) {
    var oldValueObj = $(this).editable('getValue'); //get old value obj

    for(var key in oldValueObj) {
        var value = oldValueObj[key]; //get old value in loop if we don't know key

        return {newValue: value}; //set old value and stop x-editable
    }
}

Answer 4

在函数的末尾为 'url' 选项返回一个 Defered 对象的承诺。返回 this 告诉 x-editable 在该 Deferred 对象上运行 resolve 之前不要更改客户端数据中的值。如果拒绝（）最终被运行，那么旧值仍然存在。

url: function (params) {

    /***ADD DEFERRED***/
    var d = new $.Deferred()
    var orderID = $(this).data("order-id");
    var data = "OrderID=" + orderID + "&Price=" + params.value;

    $.ajax({
        type: 'post',
        url: '/Trades/SetOrderPrice',
        data: data,
        async: false,
        success: function(data, textStatus, jqXHR) {
           /***RESOLVE THE DEFERRED OBJECT***/
           d.resolve(); 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            /***REJECT IF ERROR OCCURRED***/
            d.reject(thrownError);
            //d.reject(''); //You could also return just an empty string, but must return a string


        }

    })

    /*** RETURN A PROMISE ***/
    return d.promise();
}

Answer 5

由于您是从 url 发出 ajax 请求，因此一种可能的解决方案是调用可编辑错误方法，您可以在初始化期间跟踪该方法。

url: function(params) {
            var url = '/xxx/yyy/dosomething';

            var success = $(this).data('editable').options.success;
            var error = $(this).data('editable').options.error;

            // call your ajax request and invoke success

             $.ajax({
                type: method,
                url: url,
                data: data
                async: false,
                error: function(x,y,z) {
                  error();
                },
                success: function(x,y,z) {
                  success();
                }
            });
}

Answer 6

使用此代码，它成功地为我工作

$(".editable-open").editableContainer("hide");