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
    var spinner = $('');
        display: 'none',
        position: 'absolute',

  beforeSend: show_spinner,
  complete: hide_spinner,

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

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);


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"

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.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s