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

时间:2013-02-19 21:09:04

标签: php jquery mysql ajax jquery-ui-sortable

我有一个字段表,其中包含使用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/,它确实有用 - 只是不是每次都有。谁能告诉我我做错了什么?提前谢谢!

1 个答案:

答案 0 :(得分:1)

我拿了你的代码并重新创建了你的模块,它每次运行都很好。 基于此,我可以得出结论,可能从缓存中提供PHP页面?你能检查一下“生成的PHP页面”的标题吗? 最简单的方法是使用Firefox的Firebug或Chrome的开发人员工具来监控网络流量并检查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>