Howto serialize multiple Lists with Jquery

Question

I have 3 sortable UL's and a simple jquery/javascript

<ul class="sortable" id="menu1">
  <li id="id_1">whatever</li>
  <li id="id_2">you</li>
</ul>
<ul class="sortable" id="menu2">
  <li id="id_3">wanne</li>
  <li id="id_4">put</li>
</ul>
<ul class="sortable" id="menu3">
  <li id="id_5">in</li>
  <li id="id_6">here</li>
</ul>

$(function() {
    $("ul.sortable").sortable({
        connectWith: 'ul'
        });
    });
</script>

LI's are draggable between UL's How can i serialize this so i get for example menu1[0]=1&menu1[1]=3 Or and array or whatever i can work with to save the state?

Luca Filosofi · Accepted Answer · 2010-05-30 14:16:30Z

10

UPDATED

DEMO: http://jsbin.com/evoru4/2

In your case use this:

$(function() {
    $("ul.sortable").sortable({
        connectWith: '.sortable',
        update: function(event, ui) {
        var position = $('.sortable').serial();
        alert( position );
        }
    });
});

// this function make your UL LI a serialized object

(function($) {
    $.fn.serial = function() {
        var array = [];
        var $elem = $(this);
        $elem.each(function(i) {
            var menu = this.id;
            $('li', this).each(function(e) {
                array.push(menu + '[' + e + ']=' + this.id);
            });
        });
        return array.join('&');
    }
})(jQuery);

that give you something like this:

menu1[0]=id_1&menu1[1]=id_2&menu2[0]=id_4&menu2[1]=id_6&menu3[0]=id_5&menu3[1]=id_3

that is representing the position order of each element

edited May 30, 2010 at 14:16

answered May 29, 2010 at 23:58

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

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

1 Comment

Martijn Over a year ago

Idd, that far i was, but the problem is that i need to know in which menu's they are, so 1 order isn't enough.

Community · Accepted Answer · 2017-05-23 12:33:42Z

2

Got it working thx to another thread: link text

 $(function() {
 $(".sortable").sortable(
{
    connectWith: 'ul',
    stop : function () 
    { 
        $.ajax(
        {
            type: "POST",
            url: "update.php",
            data: 
            {
                sort1:$("#menu1").sortable('serialize'),
        sort2:$("#menu2").sortable('serialize'),
                sort3:$("#menu3").sortable('serialize')
            },
            success: function(html)
            {

                alert(html);

            }
        });
    } 
}).disableSelection();
});

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered May 30, 2010 at 13:09

Martijn

1271 silver badge8 bronze badges

Collectives™ on Stack Overflow

Howto serialize multiple Lists with Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related