9

我正在使用 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（没有 $ 美元符号）。正如您在我的 jquery 代码中看到的那样，我试图用 $('#freight').html('$' + newValue); 覆盖 x-editable 放在页面上的值；

由于某种原因，这不起作用。我想要 300.00 美元，而不是 300.00 美元。

4

5 回答 5

13

您需要做的是防止该display方法覆盖您的success方法。

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

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

于 2013-10-17T06:14:12.257 回答
4

只要您的回复采用以下格式：

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

并且您确保从成功回调中返回响应：

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

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

于 2014-12-02T19:57:36.923 回答
3

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...
 },
于 2013-04-17T18:38:09.363 回答
1

以下是两种情况

案例 1：您只想以不同的方式显示值

你可以使用渲染事件

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

情况 2：您想将值设置为在 ajax 响应中返回的元素，而不是在客户端设置的值，例如 uesr 插入值“Hello”但服务器将其转换为“hello”（小写）然后执行以下操作

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

使用以下代码

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

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

于 2014-04-23T12:41:29.027 回答
0 
success: function(response, newValue) {
  // Update the purchase order amounts...
  $('#freight').editable('option', 'value', newValue);
}
于 2016-08-24T11:12:45.357 回答