Geek asks and answers

How to use serialized and send ajax (johnny sortable plugin)

I am using http://johnny.imtqy.com/jquery-sortable/

I can't figure out how to send serialized data?

My html

<ul>
    <li data-id="1">Item 1</li>
    <li data-id="2">
        Item 2
        <ul>
            <li data-id="4">Item 4</li>
            <li data-id="5">Item 5</li>
        </ul>
    </li>
    <li data-id="3">Item 3</li>
</ul>

Js

$(function  () {
    $("ul#menuList").sortable({
        handle: 'i.icon-move',
        itemSelector: 'li',
        placeholder: '<li class="placeholder"/>',
        onDrop: function (item, container, _super)
        {
            //var dataToSend = $("ul#menuList").sortable("serialize").get();

            $.ajax({
                url: "ajax_action.php",
                type: "post",
                data: dataToSend,
                cache: false,
                dataType: "json",
                success: function()
                {}
            });
            //_super(item, container);
        }
    });
});

I tried as described in this question , but it does not work with ul-> li

I need to get an array

[0] => Array
(
    [id] => 1
)
[1] => Array
(
    [id] => 2
    [children] => Array
    (
        [0] => Array
        (
            [id] => 4
        )
        [1] => Array
        (
            [id] => 5
        )
    )
)
[2] => Array
(
    [id] => 3
)

I would be grateful for your help.

+3
source share
2 answers

You need to change the function serialize. Take a look here http://jsfiddle.net/985Mg/

The plugin allows multiple nested lists in a single list item. This way you get one extra layer in the default data serialization.

+1
source

. , . , .

$(function  () {
  $("ul#menuList").sortable({
    serialize: function ($parent, $children, parentIsContainer) {
      var result = $.extend({}, {id:$parent.attr('id')});
      if(parentIsContainer)
        return $children
      else if ($children[0]) 
        result.children = $children
      return result

    }, 
    onDrop: function ($item, container, _super) {
        // default
        $item.removeClass("dragged").removeAttr("style")
        $("body").removeClass("dragging")
        // END - default

        var dataToSend = $("ul#menuList").sortable("serialize").get();

        //console.log(dataToSend);

        $.ajax({
            url: "ajax_action.php",
            type: "POST",
            data: {"sortedList":dataToSend},
            cache: false,
            dataType: "json",
            success: function () {}
        });
        //_super(item, container);
    }
  })
})
+3

More articles:


All Articles