JS/Jquery populating array then sending via AJAX

I am using JQuery UI's sortable to sort a list #sortable by dragging each element in to the desired order.

I am storing the id of the item in the li id attribute (I am aware this is invalid), and the order of the element in the rel attribute.

So for example:

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

My code successfully updates the relwhen I drag and drop a li element - this is fine.

Now, when I click the submit button, I would like to send an array of data via AJAX to my script, which will perform the update queries. Ideally, the id will be the key and the rel value will be the `value.

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

Here is my code thus far:

$('#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);         
});

I'm getting undefined lots of times in FireBug, but if I expand it, all the values are there, could someone please explain what is wrong? It makes sense to me, at least.

What is the best way to send an array of data to AJ开发者_开发技巧AX? I have read about Jquery's .param() and also serialize

Are there any best practices for this?

My 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);       
                }
});

Thanks.

I wouldn't write the code myself. Just use the functionality inherit in jQuery UI Sortable.

Tie in a stop event function and use .sortable('serialize') to get the list in the new order in a format easily passed through Ajax.

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

If you look at the docs for jQuery UI's sortable, it shows 2 methods to get an array of the ID's back for your purpose. I'd look specifically at the serialize method as it gets closer to what you want. Especially if you can forgo the rel attribute and just move to an underscored id.

Please follow this link correct to work on jquery sortable for ajax contents and binding to a update function see this 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');
}});
}