How do I stop a Bootstrap x-editable from updating an edited field when ajax call fails?

Question

How do I stop a Bootstrap x-editable from updating an edited field when ajax call fails?

I am passing a function as the 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

You have two options, either throw exception in the callback and x-editable will catch it itself or you can use the "success" event and return an empty string in the success function and you're set

Answer 2

It would be better to use build-in ajax call that will automatically keep old value in case of error:

$('.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

Since you are making ajax request from url, one possible solution is to invoke the editable error method, and you can keep track of that method during initialization.

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 5

Return a Deffered object's promise at the end of your function for the 'url' option. Returning this tells x-editable to not change the value in the client side data until resolve is run on that Deferred object. If reject() ends up being run then the old value remains.

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 6

use this code ,it worked for me successfully

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