jQuery UI sortable not serializing with custom attributes

Question

I'm using jQuery UI sortable with data-id attributes. I know you can use sortable('serialize') with something like id="row_4" and this does work for me but I need to do it this way.

• sortable('serialize', {attribute: 'data-id'}) gives an empty string
• sortable('toArray'), {attribute: 'data-id'}) gives expected output

<div data-sortable="link/to/handler">
    <div data-id="1">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
</div>

var container = $('[data-sortable]');
container.sortable({
    items : "> [data-id]",
    update : function() {
        var postData = container.sortable('serialize', {
            attribute: 'data-id'
        });
        alert(postData); // Nothing
        var postData2 = container.sortable('toArray', {
            attribute: 'data-id'
        });
        alert(postData2); // 1,3,4,5,2 etc.
    }
});

Fiddle: http://jsfiddle.net/ogzw5pL2/

What's the deal? I'm 98% certain this was working before.

Answer 1

You need key and value for serialize, but you can play with parameters to override default behavior and get wanted results.

In your case you can set the attribute, key and expression you want so that it takes the data-id and build the string with defined key and proper value. Like this:

           var postData = container.sortable('serialize', {
                attribute: 'data-id',//this will look up this attribute
                key: 'order',//this manually sets the key
                expression: /(.+)/ //expression is a RegExp allowing to determine how to split the data in key-value. In your case it's just the value

            });

Fiddle: http://jsfiddle.net/c2o3txry/