用AJAX排序的jQuery只能在其他時間排序

我有一個字段表，它有一個使用jQuery排序插件的拖拽式排序控件，該插件依次通過AJAX激發一個PHP腳本，在提交按鈕後保存更改被點擊。但是，它實際上只在其他時間平均起作用。每過一段時間，我都會連續兩次成功運行，但這非常罕見。用AJAX排序的jQuery只能在其他時間排序

這裏是我的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頁面，/管理/數據庫/ 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/，它確實工作 - 不是每次。誰能告訴我我做錯了什麼？提前致謝！

來源

2013-02-19 Sean Cunningham

我把你的代碼和重新創建你的模塊，它每次都能正常工作。基於此我唯一可以得出結論的可能是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>

來源

2013-02-19 21:56:33

我很樂意提供，雖然我不知道怎麼做，通過螢火蟲。你怎麼能得到一個AJAX被稱爲頁面的標題？或者，如果有某種方法可以強制執行非緩存版本，我可以這樣做，但我不知道該執行什麼命令。 – 2013-02-19 22:10:39

首先在Firefox中安裝Firebug。然後打開你的頁面，然後啓用Firebug。然後通過重新排序項目並單擊更新在頁面上進行更改。在Firebug的網絡部分，你會看到請求出去。你也需要稍微修改你的代碼，因爲更新順序鏈接是一個「a href」，所以當你點擊它時會重新加載頁面。 Hups。我想我只是意識到這可能是你的問題。 A HREF在AJAX觸發之前重新加載頁面。因此，只需將HREF更改爲DIV或SPAN即可，並且可以100％地工作。 – 2013-02-19 22:29:07

這樣做 - 謝謝一堆，並感謝關於網絡部分的提示。我一直使用Firebug，但從未檢查過該選項卡。 – 2013-02-19 22:34:05

用AJAX排序的jQuery只能在其他時間排序

回答

相關問題