然後通過AJAX發送JS/JQuery數組然後發送

我正在使用JQuery UI的排序功能來排序列表#sortable，方法是將每個元素拖動到所需的順序。然後通過AJAX發送JS/JQuery數組然後發送

我儲存的項目在liid屬性（我知道這是無效的）的id，並在rel屬性的元素的order。

因此，例如：

<li id="23" rel="1">First</li> 
<li id="20" rel="2">Second</li> 
<li id="24" rel="3">Third</li>

我的代碼成功更新rel當我拖放li元素 - 這是好的。

現在，當我點擊提交按鈕時，我想通過AJAX發送一個數據數組到我的腳本，它將執行更新查詢。理想情況下，id將是key和rel值將是'價值。

array(
     23 => 1 
     20 => 2 
     24 => 3 
)

這裏是我的代碼至今：

$('#submit').click(function(e) { 
    e.preventDefault(); 

    //array 
    var the_data = []; 

    $('#sortable li').each(function() { 

     the_data[$(this).attr('id')] = $(this).attr('rel'); 

    }); 

    console.log(the_data);   
});

我越來越undefined很多次的螢火，但如果我展開它，所有的值都是存在的，可能有人請解釋什麼是錯誤？至少對我來說這是有道理的。

向AJAX發送數據數組的最佳方式是什麼？我已閱讀關於Jquery的.param()以及serialize

有沒有這方面的最佳實踐？

我的ajax：

myData=Jquery.param(the_data); //serialize the array? 
$.ajax({ 
       type: "POST", 
       url: "<?php echo base_url(); ?>admin/update_order/", 
       data: myData, 
       success: function(msg) { 
       alert('Updated'); 
       }, 
       error: function(msg) { 
        alert(msg);  
       } 
});

感謝。

來源

2011-04-27 calum

我不會自己寫代碼。只需使用jQuery UI Sortable中的繼承功能即可。

綁定停止事件函數並使用.sortable（'serialize'）以易於通過Ajax的格式獲取新順序的列表。

http://jqueryui.com/demos/sortable/#method-serialize

來源

2011-04-27 18:43:59

英雄所見略同。 :) – Gregg 2011-04-27 18:45:50

如果你看一下文檔的jQuery UI的排序，它顯示了2種方法來獲取ID的回你的目的的數組。我會特別注意serialize方法，因爲它更接近你想要的。特別是如果你可以放棄rel屬性，只需移動到一個下劃線的ID。

來源

2011-04-27 18:45:28 Gregg

請點擊此鏈接正確的jQuery的排序爲Ajax內容，結合工作，以一個更新功能看到這個fiddle

的Javascript

$(function() { 
$('.contentLeft').sortable({ opacity: 0.6, cursor: 'move', update: function() { 
$("#log").html('update called'); } 
}); }); 



$("#search").click(function() { 
       loadDrop();    
      }); 

function loadDrop() 
     {$.ajax({ 
       url:'/echo/html', 
       success:function(){ 
       $("#trig").html('<div><ul id="sortable" class="contentLeft"><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li></div>'); 
       test(); 
$(".contentLeft").sortable({opacity: 0.6, cursor: 'move'}); 

       } 
      }); 
     } 
function test(){ 
$('.contentLeft').sortable({ opacity: 0.6, cursor: 'move', 
update: function() { 
$("#log2").html('update called via ajax'); 
}}); 
}

來源

2014-11-13 08:45:18

然後通過AJAX發送JS/JQuery數組然後發送

回答

相關問題