Serialize function for Mootools Sortables

November 9th, 2006

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.

Sortable List Example - Updated!

October 22nd, 2006

When I first posted my Sortable List Example, I had hoped to be posting more frequently on this blog. Unfortunately, life (and work) have been very busy as always, so I apologize for the lack of content. I have been anticipating updates to the mootools framework for sometime now that would greatly reduce the amount of duplicated code needed in my example. As of SVN Revision 76, the Sortables class now allows you to pass onStart and onComplete functions in the options used to initialize the Sortables object. Therefore, I have updated my example to take advantage of this new functionality.

In my original example, I was passing an empty sortableOptions object into the initialization for the Sortable list because I didn’t need to override any options at the time. However, I was forced to use the implement functionality in mootools to change the initialize function of the Sortables class just to add three or four lines of code to the onStart and onComplete functions. This resulted in about 50 lines of duplicated code… yuck!

If you view the source of my example now, you will see a greatly simplified setup. In the sortableOptions object that used to be empty, I have defined new onStart and onComplete functions as seen below:

var sortableOptions = {
	onStart: function() {
		statusFade.clearTimer();
		$('status').setOpacity(1).setHTML('Sorting in progress...')
	},
	onComplete: function() {
		$('status').setHTML('Sorting complete!');
		statusFade.custom(1,0);
	}
};

Now, when I pass that sortableOptions object into the Sortables object, the onStart and onComplete functions are executed in addition to the existing code for those functions in the dragger object. Feel free to take a look at the updated example.

Also of note, the transitions in mootools have been changed. Instead of specifying my transition as Fx.cubic, I now have to say Fx.Transitions.cubicIn. It’s not too much trouble to add the reference to the new Transitions class, but it is somewhat annoying that some effects that existed previously do not exist under the same name anymore. For example, the old Fx.sinoidal is now Fx.Transitions.sineInOut.

I can’t really complain though, there are way more transitions now than there used to be and some of them are very cool!

Mootools Sortable List Example

October 11th, 2006

Mootools logoRecently, I’ve been playing around with mootools - the new Javascript Framework from the Mad4Milk guys. As you’ve probably already noticed, at the time of launch, there wasn’t much available in terms of demos and documentation. As time passes, the documentation is improving and people are adding resources to the mootools wiki that is available now.

One of the first examples available on the web was a Drag and Drop example provided by Jonathan Snook on his blog (See example here). After I played around with his example, I was interested in testing out the Sortable List functionality available in the effects portion of mootools. I put together a quick example of a Sortable List implementation, so feel free to check it out and view the source.

I tried to go a bit farther than simply implementing the Sortable List functionality by adding an Opacity effect and making additions to the onDrag and onComplete functions of the dragger. For a more in-depth explanation of the code, read the full post.

Read the rest of this entry »

What is this Blog For?

October 10th, 2006

So I’ve finally become one of the millions of people that have a blog! I’ve always been hesistant to create a blog because I don’t see why anyone would care to read what I have to say on a regular basis and I don’t usually have that much to say in the first place. However, recently I’ve been exploring some of the new web technologies that are out there and I decided that it might be nice to share some of my tech related thoughts and ideas. Also, I plan to post tutorials and demos of the technologies I am currently working with. Hopefully, these posts will be helpful to other people attempting to implement similar functionality or use similar technologies for their own projects.

More to come…