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


jQuery sortable with AJAX only works every other time

我有一个字段表,该表使用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/,而且它确实有效——只是不是每次都有效。有人能告诉我我做错了什么吗?提前感谢!

我接受了您的代码并重新创建了您的模块,它每次都运行良好。基于此,我唯一可以得出的结论是,PHP页面可能是从缓存中提供的?你能检查一下"生成的PHP页面"的标题吗?最简单的方法是使用Firefox的Firebug或Chrome的Developer Tools来监控网络流量并检查ajax调用和PHP响应。

编辑:我意识到你的问题是UPDATE ORDER文本是一个A 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>