Joomla/Mootools capturing order of Sortables

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