I have a list on my website. I'm using jQuery's sortable tutorial to give users the ability to change the order of the list items.
http://jqueryui.com/demos/sortable/
The trick is I would like to capture the order of the items immediately after a resort and assign the order values to hidden form elements which would be passed to my server via a form-submit where I could use a php script to save the new order of elements in a database.
Here's the source code of the demo:
<style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> <div class="demo"> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> </div><!-- End demo -->
And I'm aware that it's also possible to assign a call-back function that fires when sorting stops:
$( ".selector" ).sortable({ stop: function(event, ui) { ... } });
Thanks!
I wrote an answer to this question 5 years ago, but that answer sucked (and this question has almost 38,000 views), so here's an improved answer.
There's essentially three parts of this question that you have to solve. We'll look at all three.
The first issue we need to solve is reacting to changes in the order of sorted elements. If we check out the jQuery UI Sortable Widget's documentation, we see that it has a change
event which fires whenever the sort order changes, and is perfect for our needs.
Side note: My original answer used
stop
instead of thechange
event.change
is better (at least in this case) because it will report all changes in sorting, whether the change was interactive (user) or programmatic, and only if the order has actually changed. On the other hand, thesort
event is only fired when the user stops sorting (releases the mouse, or lifts their finger).
Using the sort
event, we can now respond to changes in sorting. The following will initialize a Sortable
widget for us, and allow us to set a function to be called when the sort
even fires:
var $sortableList = $("#your-list"); var sortEventHandler = function(event, ui){ console.log("New sort order!"); }; $sortableList.sortable({ stop: sortEventHandler }); // You can also set the event handler on an already existing Sortable widget this way: $sortableList.on("sortchange", sortEventHandler);
With that done, we're now ready to take on step 2:
This part is fairly simple. We just need to get an array of the elements in our sorted list. To do this, we can just ask for the children of the ul
(list) element, using the jQuery function children()
:
var listElements = $sortableList.children(); console.log(listElements); // [ <li>, <li>, ... ]
Great, but we specifically need the element's values:
var listValues = []; listElement.forEach(function(element){ listValues.push(element.innerHTML); }); console.log(listValues); // [ "Item 1", "Item 2", ... ]
Using .sortable("toArray")
or .serialize()
are also options.
Nice! On to the final bit.
Serialization is "the process of translating data structures or object state into a format that can be stored (for example, in a file or memory buffer, or transmitted across a network connection link)" (thanks Wikipedia!)
How you do this depends a lot on your specific needs, so we'll just discuss some of the ways you could get it done using jQuery.
AJAX:
If we use AJAX, we can just shoot off a request to the server with the new order. jQuery will automatically handle serializing listValues
for us:
$.post("your-server.com/save_order", { "items": listValues } );
Or if you prefer JSON:
$.post("your-server.com/save_order", JSON.encode({ "items": listValues }) );
Form
Create a form:
<form action="your-server.com/save_order" method="POST"> <input name="items" value="" /> </form>
Update the item
input:
var serializedValue = $.param(listValues); $("#ourForm > input").val(JSON.encode(listValues));
Send it:
$("#ourForm").submit()
HTML:
<form action="save_order.php" method="POST" style="display: none;"> <input name="new_order" value="" type="hidden" /> </form>
JavaScript:
$(".selector").sortable({ stop: function(event, ui) { var data = ""; $("#sortable li").each(function(i, el){ var p = $(el).text().toLowerCase().replace(" ", "_"); data += p+"="+$(el).index()+","; }); $("form > [name='new_order']").val(data.slice(0, -1)); $("form").submit(); } });
And in save_order.php, you can parse the POST variable "new_order" and get the orders of Item 1, Item 2, Item 3, etc.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With