Improve serialization documentation

[johnny]

The documentation on the default serialization is not clear enough.

1. Add normal serialization example
2. Improve docs
3. Fix bug as demonstrated here http://jsfiddle.net/shankardevy/XwkxH/2/ (first found in Serialize gives array of empty objects #37). The subContainer field should not be present. (Firefox)

[MrBenGriffin]

I'm really struggling with the serialization of deeply nested trees using your js. An example and better docs would be very welcome.

[brunogaspar]

@MrBenGriffin it's not that hard, you just need to implement your own serialization method when you instantiate sortable, i did mine like this and it returns something like [id:1, children:[id:1, id:2]],[id:1]...

I found this on Stackoverflow and i adapted to my own needs, you will need to do the same as well or at least modify it as because i'm grabbing the id of the LI element using data-attributes you probably just have an id, but hope it helps

$(this.opt.sortable.selector).sortable({

    serialize: function (parent, children, isContainer) {

        var result = $.extend({}, { id : parent.data('item-id') });

        if (isContainer)
        {
            return children;
        }
        else if (children[0])
        {
            result.children = children;
        }

        return result;

    }

});

Edit:

And when i submit my form i grab the values and make sure they go with json format, like this:

window.JSON.stringify($(self.opt.sortable.selector).sortable("serialize").get())

[MrBenGriffin]

Bruno, that's great. Be good to add to the documentation for those like me who have less javascript-fu.

[johnny]

Thanks for pointing this out and thank you @brunogaspar for providing a nice example.

I will keep this in mind when I add another example in the future.

[Arthedian]

@brunogaspar When I have this code. it only get this data from serialization: "[{},{"children":[{}]},{},{},{},{},{"children":[{}]}]" . Why?

<ol class="example limited_drop_targets">
            <li id="1">Novinky<ol></ol></li>
            <li id="2">Polozka_2<ol><li id="12">Zkouska<ol></ol></li></ol></li>
            <li id="3">Učitelé<ol></ol></li>
            <li id="4">Rozvrhy<ol></ol></li>
            <li id="5">Fotogalerie<ol></ol></li>
            <li id="6">Kalendář<ol></ol></li>
            <li id="7">Osnovy<ol></ol></li>
            <li id="8">Kontakty<ol></ol></li>       
</ol>

$("ol.limited_drop_targets").sortable({

serialize: function (parent, children, isContainer) {

    var result = $.extend({}, { id : parent.data('id') });

    if (isContainer)
    {
        return children;
    }
    else if (children[0])
    {
        result.children = children;
    }

    return result;

},
onDrop: function (item, container, _super) {
$('#serialize_output').text(window.JSON.stringify($("ol.limited_drop_targets").sortable("serialize").get()))
_super(item, container)
  },
 });

[brunogaspar]

Change parent.data('id') to parent.attr('id'), because on my example i'm using data-item-id=":id" and you're using id=":id"

[Arthedian]

thanks