使用带有表单的jQueryUI可排序列表 [英] using jQueryUI sortable list with forms

问题描述

我正在使用jQueryUI创建一个可排序的列表，并且UI部分的效果很好，因为我可以根据需要在网页上对项目进行排序.不过，我不知道POST中如何包含排序列表的顺序.我对JavaScript完全陌生，所以如果这真的很简单，请原谅我.

I'm using jQueryUI to create a sortable list, and the UI part works great in that I can sort the items as desired on the web page. I can't figure out, though, how the order of the sorted list is included in the POST. I'm a total noob with javascript so please forgive me if this is really simple.

以下是我的html的相关部分:

Here are the relevant portions of my 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中对Jamie，Joanie，Morley，Frank和Larry的命令进行编码?

How can the order of Jamie, Joanie, Morley, Frank, and Larry be encoded in the POST?

推荐答案

您可以在可排序对象上使用方法.serialize:

You can use the method .serialize on your sortable object : http://docs.jquery.com/UI/Sortable#method-serialize

$( "#sortable" ).sortable('serialize')将为您提供ajax可提交项目数组.如果不使用ajax，只需将其分配给输入框即可.或者，如果使用ajax，只需将其传递到您的数据数组中

$( "#sortable" ).sortable('serialize') will give you an ajax submittable array of items. Just assign it to an input box if you are not using ajax. Or simply pass it into your data array if using ajax

编辑 此处的示例: http://jsfiddle.net/jomanlk/KeAer/2/

正如jQuery文档所指出的那样，要使其正常工作，您的元素需要具有set_number形式的ID(例如rank_1，rank_2).所以我修改了您的HTML

As the jquery docs note, for this to work your elements need to have ids in the form of set_number (e.g. rank_1, rank_2). So I've modified your HTML

只需删除表单中的return false，序列化值将在提交表单时设置到输入框中

Just remove the return false in the form and the serialized value will be set to the input box on form submission

这篇关于使用带有表单的jQueryUI可排序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！