использование сортируемого списка jQueryUI с формами

Question

Я использую jQueryUI для создания сортируемого списка, и часть пользовательского интерфейса прекрасно работает, так как я могу сортировать элементы по желанию на веб-странице.Я не могу понять, однако, как порядок отсортированного списка включен в POST.Я абсолютный нуб с javascript, поэтому, пожалуйста, прости меня, если это действительно просто.

Вот соответствующие части моего 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>

Как можно заказать Джейми, Джоан, Морли, Фрэнк и Ларри будут закодированы в POST?

Answer 1

Вы можете использовать метод .serialize для вашего сортируемого объекта: http://docs.jquery.com/UI/Sortable#method-serialize

$( "#sortable" ).sortable('serialize') даст вам отправляемый массив элементов ajax. Просто назначьте его в поле ввода, если вы не используете ajax. Или просто передайте его в ваш массив данных, если используете ajax

EDIT Пример здесь: http://jsfiddle.net/jomanlk/KeAer/2/

Как отмечается в документации по jquery, для того, чтобы это работало, ваши элементы должны иметь идентификаторы в виде set_number (например, rank_1, rank_2). Итак, я изменил ваш HTML

Просто удалите return false в форме, и сериализованное значение будет установлено в поле ввода при отправке формы

Answer 2

Другой вариант - просто иметь скрытое поле формы ввода со значением идентификатора для элемента в качестве значения и тем же именем.Затем отправьте форму после прекращения сортировки.Все значения будут доступны в проведенных данных в том порядке, в котором они были после сортировки.

Я делаю что-то вроде этого:

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

И форма выглядит так:

<form ...>
<ul class="sortable">

        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Some info here<input id="id_name" name="id_name" type="hidden" value="1" /></li>

        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Some more info<input id="id_name" name="id_name" type="hidden" value="2" /></li>

</ul>
</form>