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.

Advertisement

Posted in: Uncategorized