Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You are setting a variable = to the serailization, but not the actual hidden field, what happens if you set the hidden field value using</p> <pre><code>$("#sort_serialized").val($("#ulsortable").sortable("serialize").toString()); </code></pre> <p>also here is a question that has more information about posting a serialized list to another page that may be useful.</p> <p><a href="https://stackoverflow.com/questions/654535/jquery-what-to-do-with-the-list-that-sortableserialize-returns">jQuery: What to do with the list that sortable(&#39;serialize&#39;) returns?</a></p> <p>------------------ Here is an Example for you that works ---------------------------</p> <p>You should be able to post this in an html page, adjust your Script and Style Refereneces in the head and it will work. When you click the button it will put the serialized list in the textbox. For example after moving a couple of Items, I get the result </p> <blockquote> <p>Item[]=1&amp;Item[]=4&amp;Item[]=2&amp;Item[]=3</p> </blockquote> <p>Here is the code.</p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;title&gt;Sample Sort and Serialize&lt;/title&gt; &lt;link href="Content/Css/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="Content/Scripts/jquery-1.6.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="Content/Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;script language="javascript"&gt; $(function() { $("#ulSortable").sortable(); $("#ulSortable li").addClass("ui-widget-header"); $('#btnSort').click(function() { $("#sort_serialized").val($("#ulSortable").sortable("serialize").toString()); }); }); &lt;/script&gt; &lt;style&gt; #ulSortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #ulSortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor: pointer;} #ulSortable li span { position: absolute; margin-left: -1.3em; } &lt;/style&gt; &lt;ul id="ulSortable"&gt; &lt;li id="Item_1"&gt;Item 1 Content&lt;/li&gt; &lt;li id="Item_2"&gt;Item 2 Content&lt;/li&gt; &lt;li id="Item_3"&gt;Item 3 Content&lt;/li&gt; &lt;li id="Item_4"&gt;Item 4 Content&lt;/li&gt; &lt;/ul&gt; &lt;br /&gt;&lt;br /&gt; &lt;input type="text" id="sort_serialized" size="50"/&gt; &lt;input type="button" id="btnSort" value="Sort List" /&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload