Thursday, November 29, 2007

Displaying a spinning wheel image during a Dynamic Faces Ajax transaction.

I am currently building a JSF application using Netbeans 6.0. For this project I use a wide range of Woodstock components and also the Dynamic Faces extension to ajaxify some of these . As some Ajax transactions may take some time to complete, I wanted to provide the user with some visual feedback that something is happening in the background.

So these are the steps you need to follow in order to display a spinning wheel gif while the client is waiting for the server response.

  • Visit the Ajax loading gif generator and create a gif. There are plenty of similar sites in the web.
  • And an image component to the web page. This must be initially hidden, so specify visibility: hidden in the style attribute of the image. I suggest this property over the display: [none/block], because the visibility property reserves the space occupied by a hidden component.
  • Create a Javascript function that toggles the image visibility and makes it visible.
    var showLoading=function(element) {
        var loadingImage = $(element); = 'visible';
    This function receives one string argument (the id of the image) and uses the prototype dollar function.
  • Now we need to call this method when the ajax transaction is initiated. This happens in the onClick event action method of a button or hyperlink component, by calling the function. So we just need to add a call to the showLoading function right before this.
  • The final step is to hide the image when the transaction completes. This can be done by adding the image component to the "re-render" list of components of the AjaxTransaction component. This is enough, because when the image component is re-rendered when the response is received, it uses the initial value of the visibility property, which is set to 'hidden'.

1 comment:

Anonymous said...

Very helpful post..