Using Waiter with Request.HTML

[appaulo14]

Although it works fine in the Clientcide demo (http://www.clientcide.com/wiki/cnet-libraries/07-ui/11-waiter#ajax-integration), using a waiter with the useWaiter option of Request.HTML does not work for me. The waiter does not appear over the target.\n\n To examine the problem, I created two mooshells. The first at http://mootools.net/shell/fkuhA/4/ uses a direct copy of the clientcide demo. After running it and examining the result with firebug, I realized that instead of an image being inserted over the target element, only an empty div with a class of "spinner-img" was inserted. I tried setting the 'img' options inside the waiterOptions section, but all those options were apply to the "spinner-img" div. Since Waiter inherits from Spinner, I looked up the Spinner class documentation and found that applying options to the 'img' section alters the "spinner-img" div rather than the image, which is different than how the non-Request.HTML Waiter does it. \n\n A workaround that I created for now was to put the full html for an image into the 'html' option of the 'img' option of 'waiterOptions' in the Request.HTML options, as demonstrated in my second MooShell : http://mootools.net/shell/fGS4w/3/ .

[appaulo14]

Here's a little more elegant and customizable solution using Class.refactor. This should allow for all of the waiter options that are normally available.

//Fix for the useWaiter Request Bug

Request = Class.refactor(Request,{
initialize: function (options){
//If we are using a waiter
if (options.useWaiter && (options.waiterTarget || options.update)){
//Call the previous without using its Waiter method
options.useWaiter = false;
this.previous(options);
this.options.useWaiter = true;

        //Create a waiter
        var waiterTarget = options.waiterTarget || options.update;
        this.waiter = new Waiter(waiterTarget, options.waiterOptions);

        //Add event triggers to start and stop the waiter
        this.addEvent('request', function(){
            this.waiter.start();
        }.bind(this));
        ['onComplete', 'onException', 'onCancel'].each(function(event){
            this.addEvent(event, function(){
                //Stop the waiter
                this.waiter.stop();
                //Destroy the waiter residue from the page
                this.waiter.destroy();
            });
        }, this);
    }
    //If not using a waiter, just run the previous stuff
    else{
        this.previous(options);
    }
}

});