Problem with JQueryUI Sortable: serialize reporting the wrong order

Question

I'm using sortable to implement a one-dimensional list of widgets. It's working alright, but when I call serialize to send the current order back to the server, the wrong order is generated.

Here's my HTML, note the ordering of widget IDs: 13, 10, 11:

<div id="widget_columns">
    <ul id="column1" class="widget-column grid_8 alpha ui-sortable">
        <li id="widget_13" class="widget">
        (a widget!)
        </li>

        <li id="widget_10" class="widget">
        (a widget!)
        </li>

        <li id="widget_11" class="widget">
        (a widget!)
        </li>
    </ul>
</div>

The list is initialized with

    $(#widget_columns').sortable({
        connectWith: $(#widget_columns'),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,
        delay: 100,
        opacity: 0.8,
        containment: 'document',
        start: function (e, ui) {
            $(ui.helper).addClass('dragging');
        },
        stop: function (e, ui) {
            $(ui.item).css({ width: '' }).removeClass('dragging');
            $(settings.columns).sortable('enable');
        }
    });

However, when I then call

alert($('#widget_columns *').sortable('serialize'));

to find out the widget order, I get the correct IDs, but in the wrong order, 10, 11, 13:

widget[]=10&widget[]=11&widget[]=13

Any idea why this might be?

ifaour · Accepted Answer · 2011-05-14 12:51:25Z

2

You are applying the sortable method on the parent div and not the ul I'm not sure why, also when calling serialize you are not calling it on the previous sortable object!

Here is a small working example:

$('#column1').sortable({
    //connectWith: $('#widget_columns'),
    revert: 300,
    delay: 100,
    opacity: 0.8,
    containment: 'document',
    start: function(e, ui) {
        //$(ui.helper).addClass('dragging');
    },
    stop: function(e, ui) {
        //$(ui.item).css({ width: '' }).removeClass('dragging');
        //$(settings.columns).sortable('enable');
        alert($(this).sortable('serialize'))
    }
});

answered May 14, 2011 at 12:51

ifaour

38.1k12 gold badges74 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

winsmith Over a year ago

Thanks. Your code works, mine* still doesn't... Guess it's back to debugging for me. :-/ * my production code. The simple version I posted above works.

winsmith · Accepted Answer · 2011-05-25 11:20:03Z

0

To answer my own question, it has something to do with the fact that my solution disables the sortable whenever dragging ends, and enables it when dragging starts, a concept I unthinkingly took from some tutorial. When I removed the code disabling and re-enabling the sortable ($(settings.columns).sortable('disable');), the serialization worked fine.

answered May 25, 2011 at 11:20

winsmith

21.7k9 gold badges41 silver badges50 bronze badges

Collectives™ on Stack Overflow

Problem with JQueryUI Sortable: serialize reporting the wrong order

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related