Jquery UI Sortableリストをシリアル化する機能不全

Question

リストを動的に作成してソート可能にしたい。

初めての試みでは、リストデータの動的ロードは含まれていませんでした。私はここで構築するために基本的な例を見つけました：

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

「リスト」は、私が選択したリストに関連付けられたタスクを取得するために選択の整数値を取得する要素の変更を選択した場合。

これまで私がこれまで行ってきたことです。 Firebugでは、リストはロードされた後に適切に構造化されます。問題は、getJSON呼び出しでリストを作成した後、リストを「ソート可能」にしようとしているところだと思います。

私はJSON呼び出し内とその外側で、まだselect onChangeイベント内に "sortable and stuff"コードを設定しています。

リストは表示されますが、ソートできません。エラーはありません。バッフアント。 ：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 

、これはあなたがあなたのget成功関数内、リストを作成した後sortableをインスタンス化する必要がリストに

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

Answer 1

をロードした後にhtmlです。現在、HTMLを実際にビルドする前にそれをやっているので、ソート可能なオブジェクトはありません。

Answer 2

getJSONコールバック内に配置する必要があります。私はあなたがすでにそれを試してきたと言いますが、少なくともそれは間違いなくあなたのコードに間違いがあります。それが変更されると、それは私のために働く：Demo。

これで実際に問題が解決されない場合は、別の場所に問題がある必要があります。おそらくもっとコードを見る必要があります。