jQueryUIを使用してソート可能なリストをフォームで使用する

Question

jQueryUIを使用してソート可能なリストを作成しています。UIパーツは、Webページで必要に応じてアイテムを並べ替えることができます。私は、並べ替えられたリストの順序がPOSTにどのように含まれているかはわかりません。私はjavascriptとの合計noobだから、これは本当に簡単な場合は私を許してください。ここで

は私のhtmlの関連部分です：

<script type="text/javascript"> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 
    function OnLoad(){ 
    $("#sortable").sortable({ axis: "y", containment: "#ballot", scroll: false }); 
    $("#sortable").disableSelection(); 
    } 
    google.setOnLoadCallback(OnLoad); 
</script> 

[...] 

<form method="POST" action="/vote"> 
<input type="hidden" name="key" value="{{ election.key }}"> 
<input type="hidden" name="uuid" value="{{ uuid }}"> 
<div id="ballot" class="center"> 
<ol id="sortable" class="rankings"> 
    <li class="ranking">Jamie</li> 
    <li class="ranking">Joanie</li> 
    <li class="ranking">Morley</li> 
    <li class="ranking">Frank</li> 
    <li class="ranking">Larry</li> 
</ol> 
</div> 
</form> 

はどのようジェイミー、Joanie、モーリー、フランク、そしてラリーの順序は、POSTでエンコードすることができますか？

Answer 1

あなたのソート可能なオブジェクトのメソッド.serializeを使用することができます。http://docs.jquery.com/UI/Sortable#method-serialize

$("#sortable").sortable('serialize')は、あなたのアイテムのAJAX submittable配列を与えるだろう。 ajaxを使用していない場合は、入力ボックスに割り当てます。これはあなたの要素を動作させるためにjqueryのドキュメントは、注意したようhttp://jsfiddle.net/jomanlk/KeAer/2/

set_number（例えば形式のIDを持っている必要があります。ここにAJAX

EDIT 例を使用している場合、または単にあなたのデータ配列にそれを渡しますrank_1、rank_2）。だから、僕は形でreturn falseを削除し、シリアル化された値は、フォームの送信

Answer 2

別のオプション上の入力ボックスに設定されます、あなたのHTML

を変更しただけでIDを非表示の入力フォームフィールドを持つことです値と同じ名前のアイテムの値。次に、ソートが停止した後にフォームを送信します。値は、並べ替え後の順序で、転記されたデータですべて利用可能になります。

私はこのような何か：

$(".sortable").each(function() { 
    $(this).sortable({ 
     update: function (event, ui) { 
      $(this).closest("form").trigger("onsubmit"); 
     } 
    }); 
}); 

を、フォームは次のようになります。