Joomla/Mootools capturing order of Sortables - forms

Question

I am trying to sort a list of database entries and then update the database with the new order in Joomla.
So far I've got mootools Sortables list with every <li> having two hidden <input> to track the entry's id and order. At the moment the order variable does not change and just reflects the original order.
I was hoping to capture the submit event and change the order variables to what they should now be and then send the request on, however I have no idea how to do this...
I have:
<li style="float:left">
<input type="hidden" name="o<?php echo $row->order; ?>" value="<?php echo $i; ?>" />
<input type="hidden" name="i<?php echo $row->order; ?>" value="<?php echo $row->lotid; ?>" />
Lot <?php echo $row->lot_name; ?><br />
<?php echo $row->address; ?>
</li>
And:
window.addEvent('domready', function(){
new Sortables('#order-grid', {opacity: 0.7});
form = document.id('adminForm');
list = document.id('order-grid');
form.addEvent('submit', function(e) {
var sortOrder = [];
list.getElements('li').each(function(li) {
sortOrder.push(li.retrieve... //Stuck!
});
});
});
Any help appreciated.

Answer 1

the doc pages are your friend. http://mootools.net/docs/more/Drag/Sortables
first off, i'd say save a reference.
var sortables = new Sortables(options)
then you can use the sortables.serialize() method to retrieve the new order. by default, serialization will return the element ids - but it takes an argument that is a function - so you can return whatever you like.
eg. to get an array of the new sort order, simply do
var newOrder = sortables.serialize(function(el, index) {
return el.get('data-id'); // or el.retrieve('id'); if you have one.
});
Finally, no need to do it on the submit event - you can just do something like:
var orderField = document.id("i_something_order");
new Sortables('#order-grid', {
onComplete: function() {
orderField.set('value', this.serialize(function(el) {
el.retrieve('id');
}).join(','));
}
});
note that retrieve implies you have used store beforehand. if it's a DOM attribute you are after, just do el.get('data-id') or whatever it is as suggested