使用 AJAX 进行排序的 jQuery 只能每隔一段时间使用一次

Question

我有一个字段表，其中包含使用 jQuery 的可排序插件的拖动排序句柄，一旦单击提交按钮，该插件又通过 AJAX 触发 PHP 脚本以保存更改。但是，它实际上仅平均每隔一次有效。每隔一段时间我就会连续两次成功运行，但这种情况非常罕见。

这是我的动态生成的 HTML：

<div class="foldertable">
  <table class="data" id="sortable">
    <tr class="odd" id="field_21">
      <td class="handle"><a href="/admin/database/customfields/edit?cfid=21">Occupant Name</a></td>
    </tr>
    <tr class="even" id="field_22">
      <td class="handle"><a href="/admin/database/customfields/edit?cfid=22">DBA</a></td>
    </tr>
    <tr class="odd" id="field_23">
      <td class="handle"><a href="/admin/database/customfields/edit?cfid=23">Tenant Contact</a></td>
    </tr>
  </table>
  <a href="" id="button" class="textbutton">Update Order</a>
</div>

还有我的 jQuery：

    <script type="text/javascript">
    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 order</em> to save</p>');
                $('#button').show();
                }
        });
        $('#button').click(function(event){
            var order = $("#sortable tbody").sortable("serialize");
            order += "&crudtype=order";
            $('#savemessage').html('<p>Saving changes...</p>');
            $.post("/admin/database/customfields/crud",order,function(theResponse){
                    $('#savemessage').html(theResponse);
                });
        });
    });
    </script>

以及生成的 PHP 页面 /admin/database/customfields/crud

$fields = $_POST['field'];
$counter = 1;
foreach ($fields as $field) {
  $params = array(array('value' => $counter, 'type' => 'i'), array('value' => $field, 'type' => 'i'));
  db_query('UPDATE customfields SET sortorder = ? WHERE cfid = ?', $params, false);
  $counter++;
}
print '<p>Changes saved</p>';
exit(); // Exit necessary for AJAX call
break; // End reorder

我基于此站点 http://www.simonbattersby.com/blog/drag-and-drop-with-jquery-ui/，它确实有效 - 只是不是每次都有效。谁能告诉我我做错了什么？提前致谢！

Answer 1

我获取了您的代码并重新创建了您的模块，并且每次都能正常工作。 基于此，我唯一可以得出的结论是 PHP 页面可能是从缓存中提供的？你能检查一下“生成的 PHP 页面”的标题吗？ 最简单的方法是使用 Firefox 的 Firebug 或 Chrome 的开发者工具来监控网络流量并检查 ajax 调用和 PHP 响应。

编辑： 我意识到您的问题是 UPDATE ORDER 文本是一个 HREF 链接，因此当用户单击它时会指示浏览器重新加载页面 - 所以有时它会在触发 AJAX 调用之前重新加载它。只需将您的 A HREF 更改为 DIV 或 SPAN 即可。

所以不是

<a href="" id="button" class="textbutton">Update Order</a>

有

<div id="button" class="textbutton">Update Order</div>

或

<span id="button" class="textbutton">Update Order</span>