Using the plone spinner animation in your ajax calls

Here’s a quick jquery snippet that you can use with modern versions of plone to do the little spinner status thingy during an ajax load:

/***
 * Overload default ajax methods and show a spinner graphic under the mouse 
   pointer when things are loading
 ***/
 
$(function(){
    var spinner = $('');
    spinner.css({
        display: 'none',
        position: 'absolute',
    });
    $('body').append(spinner);
});

jQuery.ajaxSetup({
  beforeSend: show_spinner,
  complete: hide_spinner,
});

function show_spinner(){
    $('img#ajax_waiting_spinner').css('display', 'block');
    
    $('body').mousemove(spinner_follow_mouse);
    
    /// position it ititially
    $('body').mousemove();
}

function hide_spinner(){
    $('img#ajax_waiting_spinner').css('display', 'none');
    
    // this prevents us from killing other
    // mousemove handlers that might be registered.
    $('body').unbind('mousemove', spinner_follow_mouse);
}

function spinner_follow_mouse(event){
     $('img#ajax_waiting_spinner').css('top', event.clientY+10).css('left', event.clientX+10);
}

Notes:

You’ll want to register this in your default profile if you’re installing this as part of a product. Add

	    <javascript cacheable="True" compression="none" cookable="False"
	              enabled="True" id="ajax_spinner.js"
	              expression=""
	              inline="True"/>
	              

to jsregistry.xml. I’ll leave adding it via the ZMI an an exercise for the reader :)

This works *almost* perfectly. If you don’t move the mouse after initialting an ajax call via a click, the mousemove event never fires and you don’t see the waiting graphic.

YYMV, could be optimized (especially the way I’m registering the js), I probably shouldn’t be using $() (no trouble yet *shrug*), etc, etc. Just a quick note so I don’t forget and so I can get some feedback on the approach.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s