Serialize data for AJAX using HTML5sortable

Question

I'm using a neat sort plugin for jQuery, HTML5 Sortable http://farhadi.ir/projects/html5sortable/ but haven't found an ideal way of serialize data to send as an AJAX POST request (to update DB). HTML ```

One
Two
Three
Four
Five

``` jQuery ``` $('ul.sortable').sortable().bind('sortupdate', function() { var data = ??; // serialize all data-id's ... this is my problem $.post('/sortupdate.php',data,function(){ // PHP script sets new order in DB alert('updated'); }); }); ``` So what I want to happen is that when I drag an LI item to a new position then the `sortupdate` event should trigger the function and send the new order of data-id attribute values. My current idea is to loop through the LI's and add attribute values to an array. Is there any smarter way of doing this, or, what is the most efficient way of doing the loop? (I'm mostly a backend guy you kno…

Accepted Answer

Since the plugin doesn't come with a built-in serialize method, you have to do it manually.

```
var dataIDList = $('ul.sortable li').map(function(){ 
    return $(this).data("id");
}).get().join(",");
```

(which is essentially what you described at the end, it loops through and creates a list.)

Now you can post it as a list:

```
$.post(url,{ idlist: dataIDList }, completeandler);
```

You could also post it as an array, just remove `.join(",");`

Serialize data for AJAX using HTML5sortable

Solution

Problem