« Sortable List Example - Updated!

Serialize function for Mootools Sortables

Creating a sortable list using mootools is great fun and all, but what most people really need to do is save the state of that list once the sorting is complete. In the current revision of mootools, there is no serialize function that will output the order of the list as can be found in the Sortable class in Scriptaculous.

A couple of people have commented on my original Sortable List example expressing the need for this serialize function and Jessica from jesirose.com posted a function on her blog that accomplishes serialization for her specific needs.

I checked around on the mootools forums and didn’t see any posts on the topic, so I went ahead and wrote a serialize function that could be added to the Sortables class:

serialize: function(element, options){
    var str = [];
    var key = encodeURIComponent(options.key || element.id);
    var elements = $A(element.getElements(options.tag || ''));
    elements.each(function(el, i) {
        str.push(key+'['+i+']='+el.id);
    });
    return str.join('&');
}

This function takes in an element which is the parent element for all of the Sortable List items that you want serialized. You can also pass in two optional params in the options object:

  • key - the string to use as the key in the key/value pair
  • tag - the type of tag that should be serialized under the parent element

If you do not specify a key or a tag, the id of the passed-in element will be used as the key and all tags under the the parent element will be serialized, regardless of their type. For a quick example, say you have a block of HTML like the following:

<div id="container">
    <div id="listitem1">ListItem 1</div>
    <div id="listitem2">ListItem 2</div>
    <div id="listitem3">ListItem 3</div>
</div>

If you want to serialize that list in the onComplete function of your Sortables object, you can use the following code:

this.serialize($('container'), {key: 'exampleKey', tag: 'div'});

This would generate a serialized output of the format:

exampleKey[0]=listitem1&exampleKey[1]=listitem2&exampleKey[2]=listitem3

The output above can be passed through an Ajax POST request and provide the necessary information needed on the backend to update a database storing the state of the list. I’ve posted the example on the mootools forums as well and I think it should be included in Sortables, but for now you’ll have to add this to your own implementation of the Sortables class to use the functionality.

This entry was posted on Thursday, November 9th, 2006 at 9:22 pm and is filed under Mootools, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Serialize function for Mootools Sortables”

  1. David B. Says:
    September 19th, 2007 at 11:00 am

    The current mootools does have a serialize function now. finding tutorials to get this function to return a serialized version of the ID’s and not a set of numbers 0-(#elements to sort) was a bit difficult though.

    in my code I used a table to sort.

    var mySort = new Sortables($(’table’), {
    onComplete: function() {
    alert(this.serialize(function(el) {
    return el.id;
    }));
    }
    });

    then after you sort your ‘table’ this will return a comma separated string of the id’s you had in your tr tags of your table.

    This is rather basic, but it took me a while to figure out the basic syntax of this.

Leave a Reply