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

Posted 2023-05-08

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

【英文标题】：How do I stop a Bootstrap x-editable from updating an edited field when ajax call fails?

【发布时间】：2013-05-20 15:28:49

【问题描述】：

我正在传递一个函数作为 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?

            

        )
    
);

【问题讨论】：

弃用通知：jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调自 jQuery 1.8 起已弃用。要为最终删除准备代码，请改用 jqXHR.done()、jqXHR.fail() 和 jqXHR.always()。

vitalets.github.io/x-editable/docs.html 显示了一些方法，例如 disable() 你不能使用它们吗？

'disabled()' 方法用于禁用字段的编辑功能...这并不能解决问题。

【参考方案1】：

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

【讨论】：

这对我来说难以置信有用！！！！只需return ""; 就可以完美运行！！！

从成功回调中返回空字符串是不可接受的选项。来自 xEditable 文档：“如果（成功回调）返回字符串 - 表示发生错误并且字符串显示为错误消息。” - 所以你最终会得到一个错误的字段，但没有错误消息。

如果您使用“内联”字段，这似乎没问题。但是“弹出”字段会受到这种技术的影响。

【参考方案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        
    ;
  
);

【讨论】：

您好，即使ajax成功，有没有办法保存旧值？

【参考方案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
    

【参考方案4】：

由于您是从 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();
                
            );

【参考方案5】：

在函数结束时为 'url' 选项返回一个延迟对象的承诺。返回 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();

【参考方案6】：

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

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