2011-12-14 85 views
2

我想動態創建一個列表,並使其排序。jQuery UI的可排序的序列化列出故障

我在第一次嘗試沒有包括列表數據的動態加載。我發現了一個基本的例子,在這裏建於:

http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

當「列表」中選擇元素改變我檢索選擇檢索與選擇的列表相關聯的任務的整數值。

這是我到目前爲止。在Firebug中,加載後列表的結構正確。我認爲這個問題是我在getJSON調用中創建列表後,使列表「可排序」的地方。

我已經試過移動「//設置我們listdiv UL中的排序和東西」的JSON調用內部和外部,但仍選擇onChange事件中的代碼。

顯示列表中,但不可排序。沒有錯誤。困惑。 :0

$(document).ready(function(){ 

// our global buildlist var 
var buildlist; 




$('#lists').change(function(){ 

    var selected = $("#lists option:selected"); 
    var listval = selected.val(); 
    buildlist = "<ul>"; 

    $.getJSON('getlist.php?cid='+listval, function(data) { 

     for(var i =0;i<data.length;i++) 
     { 
      var item = data[i]; 

    //  alert(item.id+","+item.cid+","+item.task+","+item.position); 

      buildlist = buildlist + "<li id='listtasks_"+item.id+"'>"+item.task+"</li>"; 
     } 
     buildlist = buildlist + "</ul>"; 

    $("#listdiv").html(buildlist); 

     }); // end getJSON 

// set our listdiv ul as sortable and stuff 
    $("#listdiv ul").sortable({ opacity: 0.6, cursor: 'move', update: function(){ 
     var order = $(this).sortable("serialize") + '&action=update'; 
     $.post("updatelist.php", order, function(){ 
     });                
    }         
    }); 


}); // end of change lists select box 

}); // end doc ready 

,這是加載列表

<div id="listdiv"> 
<ul> 
<li id="listtasks_1">this is item 1</li> 
<li id="listtasks_2">this is item 2</li> 
<li id="listtasks_3">this is item 3</li> 
<li id="listtasks_4">this is item 4</li> 
<li id="listtasks_5">this is itme 5 </li> 
</ul> 
</div> 

回答

0

您需要實例sortable建築列表,您走向成功函數內部之後之後的HTML。現在你在實際構建HTML之前就已經這樣做了,所以沒有任何對象可以進行排序。

+0

謝謝,現在都很好。我只是在某些時候迷惑自己。大衛赫德倫讓我平靜下來,回到正軌。 :) – Steve 2011-12-14 19:24:52

0

應放置在您的getJSON回調中。我知道你說你已經試過了,但至少這是你的代碼現在的方式肯定是錯誤的。一旦改變了,它適用於我:Demo

如果真的沒有解決您的問題,這個問題必須在別處。我們可能需要看到更多的代碼。

+0

嗯......我知道我在JSON回調中使用了它......但也許我沒有保存該文件或其他東西。現在就像魅力一樣。 *嘆*謝謝! – Steve 2011-12-14 19:22:24