Adding AJAX delay/loading indicator using Java Stripes

While exploring the Stripes framework, I spent a while looking at how to add the ‘spinner’ indicator when your server side is processing a long request. Here’s a short summary of what I did to achieve that, hope it could help save someone a little time:

1. Select a spinner image 🙂 I found this cool place where you can generate an image of your choosing at ajaxload.info. Generate whatever you like and save it somewhere, let’s say under ‘images/smallspinner.gif’.

2. In your .jsp file add the following javascript method just before the invoke method you use (again, assuming you’re working with Stripes):

function showSpinner(container)  {
         var obj = document.getElementById(container);
         obj.innerHTML = "<div ID='spinner'>
		<img src='images/smallspinner.gif'/></div>";
}

then update your invoke method to call the showSpinner method at the right time:

function invoke(form, event, container) {
         if (!form.onsubmit) { 
             form.onsubmit = function() { return false } 
         };
         showSpinner(container); //This is the new call..
         var params = Form.serialize(form, {submit:event});
         new Ajax.Updater(container, form.action, 
                 {method:'post', parameters:params});
}

3. Ah, that’s about it.. A short explanation: The target container’s contents is being replaced just before the call invocation with the ‘spinner’ image, so it shows as ‘loading’ until the call returns, and then the server side replaces it with the actual HTML result once it’s ready.