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中的submit和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>

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

jQuery Sortable插件似乎打破了serialize方法

1 个答案: