jQuery Sortable 插件似乎打破了序列化方法

Question

我有一个简单的 AJAX 表单，它允许用户重新排序项目并同时对它们进行操作。我正在使用 jQuery Sortable 插件，一切似乎都运行良好——但是，我还添加了 .serialize() 方法来传递额外的表单信息。当我点击提交按钮没有重新排序时，一切都顺利通过了。如果我重新排序一个项目，所有其他项目都会一起发送，但重新排序项目的表单值将被忽略。

这是我的 jQuery：

var fixHelper = function(e, ui) {
  ui.children().each(function() {
    $(this).width($(this).width());
  });
  return ui;
};
$(document).ready(function(){
  $("#sortable tbody").sortable({ 
    helper: fixHelper,
    opacity: 0.6, 
    update: function(){
      $('#savemessage').html('<p>Click <em>Update/Reorder</em> to save</p>');
      }
  });
  $('#button').click(function(event){
    var order = $("#sortable tbody").sortable("serialize");
    order += "&" + $("form[name=dashboard]").serialize();
    order += "&crudtype=update_dashboard";
    $('#savemessage').html('<p>Saving changes...</p>');
    $.post("/account/crud",order,function(theResponse){
      $('#savemessage').html(theResponse);
    });
  });
});

我的 HTML 是通过 PHP 创建的，但这是呈现的输出：

<table class="data" id="sortable">
  <thead>
    <th>Name</th>
    <th>Status</th>
  </thead>
  <form name="dashboard" id="dashboard">
    <tr class="odd" id="field_10">
      <td class="handle"><a href="#">Favorites</a></td>
      <td><div class="inline_checkbox"><input type="radio" name="favorites" class="box_inline" value="dashboard_email"><span class="boxlabel">Dashboard and Email</span><input type="radio" name="favorites" class="box_inline" value="dashboard" checked="checked"><span class="boxlabel">Dashboard</span><input type="radio" name="favorites" class="box_inline" value="email"><span class="boxlabel">Email</span><input type="radio" name="favorites" class="box_inline" value="off"><span class="boxlabel">Off</span></div></td>
    </tr>
    <tr class="even" id="field_1">
      <td class="handle"><a href="#">Process Tasks</a></td>
      <td><div class="inline_checkbox"><input type="radio" name="process_tasks" class="box_inline" value="dashboard_email" checked="checked"><span class="boxlabel">Dashboard and Email</span><input type="radio" name="process_tasks" class="box_inline" value="dashboard"><span class="boxlabel">Dashboard</span><input type="radio" name="process_tasks" class="box_inline" value="email"><span class="boxlabel">Email</span><input type="radio" name="process_tasks" class="box_inline" value="off"><span class="boxlabel">Off</span></div></td>
    </tr>
  </form>
</table>
<input type="submit" name="submit" value="Update/Reorder Items" class="form-submit-table" id="button">

例如，如果我在构建查询字符串后在 jQuery 中单击提交和 alert(order);，我会看到这两个项目的 POSTed 数据。但是，如果我将一个拖到另一个上重新排序，我只会看到未移动项目的数据。

Answer 1

您的 html 无效，它让 jQuery 无法找到元素。

表单标签应该在表格之外。我编辑了你的 html。

<form name="dashboard" id="dashboard">
<table class="data" id="sortable">

     <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
     </tr>      
    </thead>
  <tbody>

    <tr class="odd" id="field_10">
      <td class="handle"><a href="#">Favorites</a></td>
      <td><div class="inline_checkbox">
            <input type="radio" name="favorites" class="box_inline" value="dashboard_email"><span class="boxlabel">Dashboard and Email</span>
            <input type="radio" name="favorites" class="box_inline" value="dashboard" checked="checked"><span class="boxlabel">Dashboard</span>
            <input type="radio" name="favorites" class="box_inline" value="email"><span class="boxlabel">Email</span>
            <input type="radio" name="favorites" class="box_inline" value="off"><span class="boxlabel">Off</span></div></td>
    </tr>
    <tr class="even" id="field_1">
      <td class="handle"><a href="#">Process Tasks</a></td>
      <td><div class="inline_checkbox">
        <input type="radio" name="process_tasks" class="box_inline" value="dashboard_email" checked="checked"><span class="boxlabel">Dashboard and Email</span>
        <input type="radio" name="process_tasks" class="box_inline" value="dashboard"><span class="boxlabel">Dashboard</span>
        <input type="radio" name="process_tasks" class="box_inline" value="email"><span class="boxlabel">Email</span>
        <input type="radio" name="process_tasks" class="box_inline" value="off"><span class="boxlabel">Off</span></div></td>
    </tr>

  </tbody>

</table>
</form>

这允许在对行进行排序后找到单选按钮元素。