javascript - 清除 Bootstrap 可编辑表单

Question

我目前正在为我的应用程序的前端使用 bootstrap editable。

查看插件:http://vitalets.github.io/x-editable/index.html

我正在做的是通过 Ajax 将数据加载到页面上，并允许页面上的每个项目都是可编辑的。例如;我将用户加载到页面上，并允许编辑他的名字、姓氏和出生日期。

因为我是通过 Ajax 加载的，例如当加载第二个用户或第三个用户并且我尝试编辑名字等时，我会一直获取最初加载的第一个用户的值。

我假设它可能是缓存。我试过在功能上设置显示，甚至是自动文本。

有什么办法可以重置或清除可编辑表单吗？

参见下面的示例代码:

function editable(obj) {
    $('#title, #lastName, #firstName).editable('option', {
       pk: obj.lId,
       placement: 'bottom',
       emptytext: 'Empty',
       display: function(value) {
         $(this).text(value);
        },
       validate: function(value) {
         if ($.trim(value) === '') {
            return 'This field is required';
         }
      }
    });
}

Answer 1

假设 obj 是您的新用户，它包含新用户的头衔、姓氏和名字，您所要做的就是设置 x-editable 对象的值:

$('#title').editable('setValue', obj.title);
$('#lastName').editable('setValue', obj.lastName);
$('#firstName').editable('setValue', obj.firstName);

您的示例不起作用的原因是 x-editable 将显示与实际值分开。每当用户更改 x 可编辑值时，您的 display 函数就会被调用。默认情况下，x-editable 显示设置的任何值。但也许内部值与显示值不同，这就是 display 函数的用途 - 它对实际值没有影响，只是显示值。

X-Editable 有许多您可以利用的不同方法，您可以在此处的“方法”选项卡上找到它们:http://vitalets.github.io/x-editable/docs.html#editable