如何覆盖x-editable ajax响应值?

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.

我正在使用x-editable进行内联编辑。当我通过ajax和x-editable更新该值以得到响应时，我发现很难覆盖包含新的x-editable值的div。

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

例如，我的x-editable链接如下所示:

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

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

我在x-editable提供的弹出窗口中输入编辑，然后输入值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);

当x-editable完成时，页面上显示的值现在是300.00(没有$ dollar符号)。正如您在我的jquery代码中看到的，我正在尝试重写值x-editable在页面上添加$('#运费')。html(“$”+ newValue);

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

出于某种原因，这行不通。我要300美元，不是300美元。

5 个解决方案

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

在服务器端，JSON应该是这样的，{newValue: }

#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.

然后x-editable将为您更新字段。只需记住在响应中包含success、pk和newValue键。

#3

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

x-editable有一个选项“display:function(value, response){}”，可以用来修改页面上出现的数据:

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

#4

Following are two cases

以下是两个例子

Case 1: you want to just display value differently

案例1:您希望以不同的方式显示值

you can use render event

您可以使用渲染事件

$('#action').on('render', function(e, editable) {
    var colors = {0: "gray", 1: "green", 2: "blue", 3: "red"};
    $(this).css("color", colors[editable.value]); 
});

Case 2: you want to set value to element which is returned in ajax response instead of what set at client side e.g. uesr inserted value "Hello" but sever converts it into "hello"(small case) then do following

案例2:您希望将value设置为在ajax响应中返回的元素，而不是在客户端设置的值，例如，uesr插入值“Hello”，但sever将其转换为“Hello”(小写)，然后执行以下操作

in ajax response set new value e.g. {"success":true,"pk":13,"value":"hello"}

在ajax响应中，设置新的值，例如{"success":true，"pk":13，"value":"hello"}

use following code

使用以下代码

success:function(data, config) {
    if(typeof(data) == 'object'){
        var api_id = data.pk;
        var success = data.success;
        if(success == true){
            return {newValue:data.value}
        }   
    }
}

ensure you return object with exact name newValue

确保返回具有确切名称newValue的对象

#5

success: function(response, newValue) {
  // Update the purchase order amounts...
  $('#freight').editable('option', 'value', newValue);
}

#1