jquery sortable serialize返回一个空字符串

时间:2014-02-18 15:49:57

标签: jquery serialization jquery-ui-sortable

我遇到了这个问题并且找不到任何解决办法,因为大多数人的ids都有问题。

我有多个可排序的div,都与connectwith连接,并且工作正常。

现在我希望每次更改顺序(也在不同级别)以获得新的排列序列化。

这是我的代码:

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"

            });
});

这是html输出:

 <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 -->

如您所见,可排序元素始终具有id node_number。 排序工作正常,但序列化字符串始终为空......

非常感谢任何帮助!

谢谢

1 个答案:

答案 0 :(得分:0)

我发现了错误: 首先:带有id的那些不是直接在sortable内的conatiner 第二,如果你有几个可排序的div,由connectwith连接,并且都具有相同的类,它也不起作用......