虽然“savenochange”设置为true，但x-editable发送空字段

I have multiple fields being edited with x-editable, saving them all at once after a submit button was clicked, based on this example:

我有多个字段正在使用x-editable进行编辑,在单击提交按钮后立即将它们全部保存,基于以下示例:

https://vitalets.github.io/x-editable/docs.html#newrecord

This is the code handling the saving process:

这是处理保存过程的代码:

    $('.lpeditable').editable({
      url: "/post",
      savenochange: true
    });

    $('#save-btn').click(function() {
      $('.lpeditable').editable('submit', {
        url: '/post',
        data: {
          sub: $('#_sub').val()
        },
        ajaxOptions: {
           dataType: 'json'
        },
        success: function(data, config) {
          console.log("Success:");
          console.log(data);
        },
        error: function(errors){
          console.log(errors);
          if(errors.responseText == "missing-sub"){
            console.log("Sub missing!!");
          }
        }
      });
    });

On post it gets JSON encoded and saved into a database, when the page is loaded it gets read from the database and the page gets updated with following js code:

在帖子上它获得JSON编码并保存到数据库中,当页面加载时,它从数据库中读取,页面使用以下js代码更新:

<script>
$(document).ready(function(){
  $('.lpeditable').each(function(e) {
      var dname = $(this).attr('data-name');
      var fields = <?php if(!empty($fields)) { echo json_encode($fields); } ?>;

      if(fields !== undefined || fields !== null){
        if(fields[dname].length > 0){
          $(this).html(fields[dname]);
          $(this).removeClass('editable-empty');
        }
      }
      else {
        //
      }
  });
});
</script>

Everything seems to work fine, except if I edit only one value it sends an empty string ("") for every other value. Savenochange seems to have no effect at all.

一切似乎都运行正常,除非我只编辑一个值,它为每个其他值发送一个空字符串(“”)。 Savenochange似乎根本没有效果。

I also tried this approach:

我也试过这种方法:

 $('.lpeditable').editable({
      url: "/post",
      savenochange: true
    }).on('save', function(){
      var dataJ = {};
      $('.lpeditable').each(function(){
        var currAttr = $(this).attr('data-name');
        dataJ[currAttr] = $(this).editable('getValue');
      });
      $.ajax({
        url:"/post",
        data: dataJ,
        sub: $('#_sub').val(),
      })
    });

But it sends this:

但它发送了这个:

{"headline":{"headline":""},"headline2":{"headline2":""}}

So it seems like

好像是这样的

$(this).editable('getValue');

Is not returning anything, it is empty aswell.

不归还任何东西,它也是空的。

Any way to not overwrite unchanged values with empty ones?

有没有用空值覆盖未更改值的方法?

1 个解决方案

#1

The solution is to add

解决方案是添加

$(this).eq(0).data('editable').value = fields[dname];

to the js function updating the text on the page:

到js函数更新页面上的文本:

$(document).ready(function(){
  $('.lpeditable').each(function(e) {
      var dname = $(this).attr('data-name');
      var fields = <?php if(!empty($fields)) { echo json_encode($fields); } ?>;

      if(fields !== undefined || fields !== null){
        if(fields[dname].length > 0){
          $(this).html(fields[dname]);

          $(this).eq(0).data('editable').value = fields[dname]; // <-- There

          $(this).removeClass('editable-empty');
        }
      }
      else {
        //
      }
  });
});

This sets the value which x-editable is accessing when it saves / updates a value. This was empty before, so I set it myself. Now it's working wonderfully.

这将设置x-editable在保存/更新值时正在访问的值。这之前是空的,所以我自己设定。现在它运作得非常好。

Code for the saving process stayed the same as the first version I posted.

保存过程的代码与我发布的第一个版本保持一致。

#1