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?

            }

        })
    }
});

Asset

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead. – Sidoon

vitalets.github.io/x-editable/docs.html shows some methods like disable() can't you use them? – Coiffeur

The 'disabled()' method is for disabling the editing functionality of the field...this does not address the question. – Jaundice

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

Filibeg

This is incredibly useful to me!!!! Just return ""; and it works perfectly!!! – Jit

Returning an empty string from the success callback is not an acceptable option. From the xEditable documentation: "If (success callback) returns string - means error occurred and string is shown as error message." - so you'll end up with a field in error but no error msg. – Jaundice

Which appears to be OK if you're using 'inline' fields. But 'popup' fields will suffer with this technique. – Jaundice

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

Tonetic

Hi, Is there a way to save the old value even if the ajax succeed? – Involuted

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

Enteron

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

Ricercar

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

Shalna

Answer 6

use this code ,it worked for me successfully

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

Solita