Question

我正在使用editable插件进行预编辑

这是我使用的代码，我从Doc页面获取，它应该用于添加新记录，但我想用它来修改记录）

POSITION_INDEX

这是html

<script>
$(document).ready(function() {

   //init editables 
   $('.myeditable').editable({
      url: '/post',
      placement: 'right'
   });

   //make username required
   $('#new_username').editable();

   //automatically show next editable
   $('.myeditable').on('save.newuser', function(){
       var that = this;
       setTimeout(function() {
           $(that).closest('td').next().find('.myeditable').editable('show');
       }, 500);
   });

   //create new user
   $('#save-btn').click(function() {
       $('.myeditable').editable('submit', { 
           url: '/newuser', 
           ajaxOptions: {
               dataType: 'json' //assuming json response
           },           
           success: function(data, config) {
               if(data && data.id) {  //record created, response like {"id": 2}
                   //set pk
                   $(this).editable('option', 'pk', data.id);
                   //remove unsaved class
                   $(this).removeClass('editable-unsaved');
                   //show messages
                   var msg = 'New user created! Now editables submit individually.';
                   $('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();
                   $('#save-btn').hide(); 
                   $(this).off('save.newuser');                   
               } else if(data && data.errors){ 
                   //server-side validation error, response like {"errors": {"username": "username already exist"} }
                   config.error.call(this, data.errors);
               }               
           },
           error: function(errors) {
               var msg = '';
               if(errors && errors.responseText) { //ajax error, errors = xhr object
                   msg = errors.responseText;
               } else { //validation error (client-side or server-side)
                   $.each(errors, function(k, v) { msg += k+": "+v+"<br>"; });
               } 
               $('#msg').removeClass('alert-success').addClass('alert-error').html(msg).show();
           }
       });
   }); 

   //reset
   $('#reset-btn').click(function() {
       $('.myeditable').editable('setValue', null)
                       .editable('option', 'pk', null)
                       .removeClass('editable-unsaved');

       $('#save-btn').show();
       $('#msg').hide();                
   });
});
</script>

现在一切正常，除非我编辑前两行中的一行并点击确定它将发送最后一个表格<tr> <td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">adel</a></td> <td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description"></a></td> <td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location"></a></td> <td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website"></a></td> <td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td> <td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td> </tr> <tr> <td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">sdqsd</a></td> <td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description"></a></td> <td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location"></a></td> <td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website"></a></td> <td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td> <td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td> </tr> <tr> <td><a href="#" class="myeditable" id="new_username" data-type="text" data-name="name" data-original-title="Enter name">dzadz</a></td> <td><a href="#" class="myeditable" data-type="textarea" data-name="description" data-original-title="Enter Description">from me with love</a></td> <td><a href="#" class="myeditable" data-type="text" data-name="location" data-original-title="Enter Location">anywhere</a></td> <td><a href="#" class="myeditable" data-type="text" data-name="website" data-original-title="Enter Website">http://justawebsite.com</a></td> <td><a href="#" class="myeditable" data-type="text" data-name="picture" data-original-title="Enter Picture"><img src=""></img></a></td> <td width="10%"><button id="save-btn" class="btn btn-primary btn-sm">Ok</button><button id="reset-btn" class="btn btn-sm pull-right">Reset</button></td> </tr>的详细信息，有时它不会发送任何内容，它真的搞砸了我花了几个小时阅读文档，但我无法弄清楚问题

Answer 1

你之后尝试过刷新吗？

对我来说，我注意到，一旦它被刷新，我得到了我一直期待的结果，但仅限于其中一个。但是，我还没有解决问题。请告诉我你得到了什么样的结果。

否则尝试调试...禁用第一行中的一行并再次尝试..

Answer 2

正如我在评论中所说，你有不同的元素具有相同的id，因此选择器不会工作（id必须是唯一的）。把它们作为类来代替：

  <tr>
    <td>
      <a href="#" class="myeditable new_username" data-type="text" data-name="name" data-original-title="Enter name">adel</a>
    </td>
    <td>
      <a href="#" class="myeditable description" data-type="textarea" data-name="description" data-original-title="Enter Description"></a>
    </td>
    <td>
      <a href="#" class="myeditable location" data-type="text" data-name="location" data-original-title="Enter Location"></a>
    </td>
    <td>
      <a href="#" class="myeditable website" data-type="text" data-name="website" data-original-title="Enter Website"></a>
    </td>
    <td>
      <a href="#" class="myeditable picture" data-type="text" data-name="picture" data-original-title="Enter Picture">
        <img src="" />
      </a>
    </td>
    <td width="10%">
      <button class="btn btn-primary btn-sm save-btn">Ok</button>
      <button class="btn btn-sm pull-right reset-btn">Reset</button>
    </td>
  </tr>

这是帮助你入门的小提琴https://jsfiddle.net/virginieLGB/k2of9xor/1/

在那里，您会看到我选择了您要提交的可修改元素。

$('.save-btn').click(function() {
    var that = $(this);
    var allEditables = that.parents("tr").find(".myeditable"); // all ".myeditable" elements in the same "tr" as the ".save-btn" that was clicked on
    allEditables.each(function() {
        // here I've kept your code because I don't know what happens in your file, but maybe you need a bulk action
      $(this).editable('submit', { 
         ...

我不知道您的PHP文件是如何工作的，所以不知道如何保存您的用户以及是否需要一次提交所有字段。如果是这样，你必须稍微修改我的答案。

可编辑的多个表格在桌子上

2 个答案: