2014-02-18 50 views
0

我被這個問題困住了,並沒有找到任何解決方案,因爲大多數人都有他們的ID的問題。jquery sortable serialize返回一個空字符串

我有多個可排序的divs,所有與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。 排序工作正常,但序列化字符串總是空的...

任何幫助非常感謝!

謝謝

回答

0

我發現了錯誤: 首先:與IDS的那些沒有直接的排序 第二內部conatiners如果你有幾個排序的div,由connectwith connecteed和所有具有相同類,它不工作以及...