Future Adapter – Protoload is great

Posted
8 January 2009 @ 2am

Tagged
ajax, javascript, library, props, protoload

Share and Enjoy

Protoload is great

Just wanted to give a shout-out to a little javascript tool that I include in pretty much every project. Protoload lets you mark an element as “waiting” while your AJAX is doing its bit. It works with prototype and extends Element to add startWaiting and stopWaiting methods.

Its as simple as:

$('foo').startWaiting();

or in a slightly bigger example:

var Updater = Class.create({
    initialize: function() {
        $('button').observe('click', this.click.bindAsEventListener(this));
    },

    click: function(event) {
        $('form').startWaiting();

        new Ajax.Request('/props', {
            paramaters: { protoload: 'is cool!' },
            onSuccess: function() {
                $('form').stopWaiting();
            }
        });
    }
});

Your element will be covered in an animated gif prompting the user to wait until its ok to continue. Works in all browsers.

It also works great to stop double-clicks on form submits in non-AJAX scenarios.

Thanks Andreas.