Question

我正在尝试通过ajax对可排序更新重新排序列表，但是在sortable已经在页面加载时初始化之后通过ajax向该列表添加新项目时，它无法使用＆＃识别新项目34;序列化＆＃34;功能。它允许我将它拖动，就像它正在工作一样，但是使用我的更新函数发送的代码缺少新元素。

＆＃13;

//Sort categories
$('#categories-list').find('tbody').sortable({
  connectWith: 'tbody',
  opacity: 0.6,
  cursor: 'move',
  forcePlaceholderSize: true,
  update: function(e) {
    var serialized = $('#categories-list tbody').sortable('serialize');
    console.log(serialized);
    $.post('admin/ereg_forms/set_category_position', serialized, function(data) {
      if (data.status == 'error') {
        alert(data.message);
      }
    });

  }
});


//Add category submit
$("#add-category-submit").click(function(e) {
  e.preventDefault();

  $(".errors-block").html('');

  $('#add-category-submit').hide();

  $.ajax({
    url: $("#add-category-form").attr('action'),
    type: 'POST',
    data: $('#add-category-form').serialize(),
    dataType: 'json',
    success: function(data) {

      $('#add-category-submit').show();

      //Check if server side validation passed
      if (data.status == 'error') {
        //Show error on popup dialog
        $("#add-category-form .errors-block").html(data.message);
        alert('Sorry, the information that was sent is invalid. Please review the errors at the top of the form and try again.');
      } else {

        var category_data = data.data;

        var tableRow = '<tr class="category-row-' + category_data.id + '"><td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">&#8597;</span>' +
          '</td><td>' + category_data.title +
          '</td><td></tr>'

        $(tableRow).appendTo('#categories-list tbody');


        resetForm($('#add-category-form'));

        //Close popup window
        $('#add-category').dialog('close');

        $("<div title='Success!'>Category has been saved.</div>").dialog({
          modal: true,
          width: 'auto'
        });

      }

    },
    error: function(data) {
      alert('An unknown error has occurred, please try again.');
      $('#add-category-submit').show();
    }

  });
});

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<table class="data" id="categories-list">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr id="category-row-19">
      <td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td>
      <td class="category-row-title">test1</td>
    </tr>
    <tr id="category-row-20">
      <td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td>
      <td class="category-row-title">test</td>
    </tr>
  </tbody>
</table>

＆＃13;

我到处寻找解决方案，但没找到一个有效的解决方案。我尝试过使用＆＃34;刷新＆＃34;函数与sortable，我已经尝试在ajax调用的成功函数内初始化sortable以添加新类别，但它也不起作用。

当我在console.log（序列化）时，它只有数组中最初加载的元素。

Answer 1

IDK发生了什么，但这个假添加有效，也许你可以效仿这个？注意我清理了几个语法问题并使用了ajax promise方法来更好地组织它。

我建议你更新你的jQuery版本，在更新的版本中更好一些修复bug。

＆＃13;

tr td {
  border: 1px solid lime;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="add-category-form" action="metoo">I am an empty form, so what
  <div class="errors-block">me error aggain? no way</div>
</div>
<table class="data" id="categories-list">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr id="category-row-19">
      <td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td>
      <td class="category-row-title">test1</td>
    </tr>
    <tr id="category-row-20">
      <td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td>
      <td class="category-row-title">test</td>
    </tr>
  </tbody>
</table>

<button id="addmorefool" type="button">Add More</button>
<div class="errors-block">me error</div>
<button type="button" id="add-category-sumbit">add category</button>

＆＃13;

{{1}}

＆＃13;

Answer 2

我最终解决了这个问题，问题出在添加类别函数中，我正在应用“class”属性，而不是使用class-row- {id}的“id”属性。

jQuery可排序序列化无法识别动态添加的内容

2 个答案: