How to override x-editable ajax response value?

Question

I am using x-editable to do inline editing. When I update the value via ajax and x-editable to get the response, I am finding it very difficult to override the div that contains the new x-editable value.

For example, my x-editable link looks like this:

 <a href="#" id="freight">$100</a>

I enter my edit in the pop-up that x-editable provides then enter the value 300.00

When I do my edits, I proceed as follows:

 $('#freight').editable({
            validate: function(value) {
                if($.trim(value) == '') return 'This value is required.';
            },
            type: 'text',
            url: '{{ path('update_purchase_order_ajax') }}',
            pk: {{ purchaseOrder.id }},
            title: 'Enter Freight Value',
            ajaxOptions: {
                dataType: 'json'
            },
            success: function(response, newValue) {
                // Update the purchase order amounts...
                $('#freight').html('$' + newValue);
            }
        });

When x-editable is finished, the value that shows up on the page is now 300.00 (without the $ dollar sign). As you can see in my jquery code, I am trying to override the value x-editable is putting on the page with $('#freight').html('$' + newValue);

For some reason this is not working. I want $300.00 to show up, not 300.00.

Answer 1

What you need to do is prevent the display method from overwriting your success method.

display: function(value, response) {
  return false;   //disable this method
},
success: function(response, newValue) {
  $(this).html('$' + newValue);
}

On the server side, your JSON should be like this, {newValue : <value>}

Answer 2

As long as your response is of the format:

{"success":true,"pk":2311,"newValue":"somenewvalue"}

and you make sure to return the response from the success callback:

success: function(response) {
   var newValue = '$'+response.newValue;
   response.newValue = newValue;
   return response;
}

then x-editable should update the field for you. Just remember to include success, pk, and newValue keys in the response.

Answer 3

x-editable has a option "display:function(value, response){}" that can be used to modify the data that appears on the page:

 ,
 display: function(value, response) {
      $(this).text(response.new_value);
      // new_value being the value that is returned via the json response...
      // this value can either be modified here in the javascript or in the controller which set the value...
 },