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

Question

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

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

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

我在x-editable提供的弹出窗口中输入我的编辑,然后输入值300.00

当我进行编辑时,我按以下步骤操作:

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

当x-editable完成后,页面上显示的值现在为300.00(没有$ dollar符号).正如你在我的jquery代码中看到的那样,我试图覆盖x-editable的值,用$('#furrency')放置页面.html('$'+ newValue);

由于某种原因,这是行不通的.我希望300.00美元出现,而不是300.00.

Answer 1

您需要做的是阻止该display方法覆盖您的success方法.

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

在服务器端,你的JSON应该是这样的, {newValue : <value>}

Answer 2

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