Response title
This is preview!
JQuery Sortable returns the same order every time
Answered
- Need more info
- Working on it
- Answered
in Using jQuery UI
•
13 years ago
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
-----------------------------------------------------------------------
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>
1