X 可编辑获取未编辑输入字段的值

Question

我目前有一个表格，用作查看/编辑联系页面。我尝试使用保存按钮，而不是每次编辑单个字段时都提交值，该按钮将从表单中编译值对象并将它们提交到数据库。我遇到的问题是，当我尝试获取输入框的值时，如果该输入字段尚未编辑，则返回的值为"

$('#view-contact-first-name').editable("getValue") 

我尝试浏览 x-editables 文档并尝试使用 savenochange：true，选项，但这也没有解决我的问题。有没有人碰巧知道我可能做错了什么。（如果需要，可以发布更多代码）

 $('#view-contact-first-name').editable({
        type: 'text',
        name: 'FirstName',
       // url: '',
        emptytext: "Enter First Name",
        savenochange: true,
        validate: {
            view_contact_first_name: function (v) { if (v == '') return 'Required field!' }
        },
        display: function () {
            $(this).text(contact.FirstName);
        }
    });

Answer 1

你试图做的事情会破坏x-editable的目的。

由于 x-editable 一次只允许更改一个输入，因此仅保存该输入的值是有意义的。

您的解决方案应如下所示，尽管有点笨拙：

.HTML

<div id="containAllEditable"><!-- lots of x-editable inputs inside --></div>

.JS

$('#containAllEditable .editable').editable({
    type: 'text',
    name: 'FirstName',
   // url: '',
    emptytext: "Enter First Name",
    savenochange: true,
    validate: {
        view_contact_first_name: function (v) { if (v == '') return 'Required field!' }
    },
    display: function () {
        $(this).text(contact.FirstName);
    },
}).on('save',function(){
    /*
    *  Event triggered when save is successful
    */
    var dataJson;
    $('#containAllEditable .editable').each(function(){
         /* We build a JSON list of all input found in the div */
         dataJson[$(this).attr('data-name')] = $(this).editable('getValue');
    });
    /* Do your ajaxy stuff and save all the form's variables */
    $.ajax({
         url:'url/to/saveform',
         data: dataJson,
    })
});