然后通过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);  
       } 
});

感谢。

答

我不会自己写代码。只需使用jQuery UI Sortable中的继承功能即可。

绑定停止事件函数并使用.sortable（'serialize'）以易于通过Ajax的格式获取新顺序的列表。

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

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

答

如果你看一下文档的jQuery UI的排序，它显示了2种方法来获取ID的回你的目的的数组。我会特别注意serialize方法，因为它更接近你想要的。特别是如果你可以放弃rel属性，只需移动到一个下划线的ID。

答

请点击此链接正确的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'); 
}}); 
}

然后通过AJAX发送JS/JQuery数组然后发送

相关推荐