jquery sortable serialize returns an empty string

Question

I am stuck with this problem and couln't find any solution, since most people have a problem with their ids.

I have multiple sortable divs, all connected with connectwith and it's working fine.

Now I want everytime I change the order (also over different levels) to get the new arranging serialized.

Here is my code:

var saveNewOrder = function(){
    $( ".level" ).sortable( "refreshPositions" );
    var sorted = $( '.level' ).sortable('serialize');
    document.getElementById("nodeid_input2").setAttribute("value", sorted);
    //document.getElementById("j_idt70:change_order").click();
};


$(document).ready(function(){
  levelWidthUpdate();
  $('.level').sortable(
            { 
                connectWith: ".level",
                update: function(event, ui){
                    levelWidthUpdate();
                    saveNewOrder();
                },
                handle: ".node-heading, .cloud-center, .cloud-left"

            });
});

And here is the html output:

 <div class="level"><span class="node node-default">
        <div class="node-heading">first change ever in db</div>
        <div class="node-body" id="node_0" onclick="openNode(0)">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div></span>
            </div>
            <div class="level"><span class="node node-default">
        <div class="node-heading">first depth first child</div>
        <div class="node-body" id="node_1" onclick="openNode(1)">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div></span><span class="node node-default">
        <div class="node-heading">first depth second child</div>
        <div class="node-body" id="node_2" onclick="openNode(2)">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div></span>
            </div>
            <div class="level"><span class="node node-default">
        <div class="node-heading">second depth first child</div>
        <div class="node-body" id="node_3" onclick="openNode(3)">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div></span><span class="node node-default">
        <div class="node-heading">second depth decond chile</div>
        <div class="node-body" id="node_4" onclick="openNode(4)">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div></span><span class="node node-default">
        <div class="node-heading">second depth third child</div>
        <div class="node-body" id="node_5" onclick="openNode(5)">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div></span><span class="node node-default">
        <div class="node-heading">secon depth fourth child</div>
        <div class="node-body" id="node_6" onclick="openNode(6)">

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div></span>

</form>
            <!-- OUTPUT REPEATER END -->

So as you can see, the sortable elements have always the id node_number. The sorting works fine, but the serialize string is always empty...

Any help is much appreciated!

Thank you

Answer 1

I found the mistake: first of all: the ones with the ids were not the conatiners directly inside the sortable second if you have several sortable divs, connecteed by connectwith and all have the same class, it doesnt work as well...