JQuery Sortable returns the same order every time

JQuery Sortable returns the same order every time

Hi,

I'm using Sortable to sortsome images using the following code... the problem is that the serialize method returns the same string every time, even after re-arranging the items in the list. There may be a glaring error here as I'm not a JQuery or JavaScript expert, but if there is, I'd sure appreciate someone pointing it out to me (and for the benefit of others).

Thanks in advance.

ukwebguy

-----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>jQuery UI Sortable - Display as grid</title>
 <link type="text/css" href="JQuery/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="JQuery/js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="JQuery/development-bundle/ui/jquery.ui.core.js"></script>
 <script type="text/javascript" src="JQuery/development-bundle/ui/jquery.ui.widget.js"></script>

 <script type="text/javascript" src="JQuery/development-bundle/ui/jquery.ui.mouse.js"></script>
 <script type="text/javascript" src="JQuery/development-bundle/ui/jquery.ui.sortable.js"></script>
 <link type="text/css" href="demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; }
 #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 135px; height: 90px; font-size: 4em; text-align: center; }
 </style>
 <script type="text/javascript">
 $(function() {
 var order;
 $("#sortable").sortable();

 order = $("#sortable").sortable('serialize',{key:'image'});
 document.imageSort.SortOrder.value = order;

 $("#sortable").disableSelection();
 });
 </script>
</head>
<body>
<div class="demo">

<ul id="sortable">
 <li id="sortable_1" class="ui-state-default"><img src="propertyImages/image-5.jpg" width="135" height="90" alt="" /></li>
 <li id="sortable_2" class="ui-state-default"><img src="propertyImages/image-3.jpg" width="135" height="90" alt="" /></li>
 <li id="sortable_3" class="ui-state-default"><img src="propertyImages/image-2.jpg" width="135" height="90" alt="" /></li>
 <li id="sortable_4" class="ui-state-default"><img src="propertyImages/image-4.jpg" width="135" height="90" alt="" /></li>
 <li id="sortable_5" class="ui-state-default"><img src="propertyImages/image-6.jpg" width="135" height="90" alt="" /></li>
 <li id="sortable_6" class="ui-state-default"><img src="propertyImages/image-1.jpg" width="135" height="90" alt="" /></li>
</ul>

</div>

 <form name="imageSort" action="imagesort.asp" method="GET" />
 <input type="hidden" name="SortOrder" />
 <input type="button" name="TellMe" value="Tell Me" onclick="alert(document.imageSort.SortOrder.value);" />
 </form>

</body>

</html>