Generic Busy Indicator (for both Ajax and non-Ajax submits)

The idea of a generic busy indicator is to show a busy sign whenever the browser is processing remote requests. Ofcourse this feature comes built in with every browser, but users get confused whether the site is really loading something or if the site has just stalled - if nothing appears on the site itself. This often results in the users clicking the request buttons several times, which just adds into the possible overload of the network and the servers. User anxiety can be significantly reduced showing a busy signal to the user (think, e.g., gmail busy indicator).

The following script is a working example that will set a busy indicator visible whenever a link or button is pressed on the web page. It simply detects the user click and analyzes the reason to decide whether to show the busy indicator. Whenever a new page is loaded, the busy sign is hidden again. The wicket-specific addition is that the indicator is handled properly also when the page is not completely loaded but instead there is an ajax request being processed.

Code

Style a busy indicator:

<style type="text/css">
#bysy_indicator {
  display: none;
  float: right;
  background: rgb(255,241,168);
  margin-top: 5px;
  z-index: 1000;
  width: 200;
  font-weight: bold;
  text-align: center;
  font-size: 1em;
}
</style>

Attach some javaScript to the page:

<script type="text/javascript">
 window.onload = setupFunc;

 function setupFunc() {
   document.getElementsByTagName('body')[0].onclick = clickFunc;
   hideBusysign();
         Wicket.Ajax.registerPreCallHandler(showBusysign);
         Wicket.Ajax.registerPostCallHandler(hideBusysign);
         Wicket.Ajax.registerFailureHandler(hideBusysign);
 }

 function hideBusysign() {
   document.getElementById('bysy_indicator').style.display ='none';
 }

 function showBusysign() {
   document.getElementById('bysy_indicator').style.display ='inline';
 }

 function clickFunc(eventData) {
   var clickedElement = (window.event) ? event.srcElement : eventData.target;
   if (clickedElement.tagName.toUpperCase() == 'BUTTON' || clickedElement.tagName.toUpperCase() == 'A' || clickedElement.parentNode.tagName.toUpperCase() == 'A'
     || (clickedElement.tagName.toUpperCase() == 'INPUT' && (clickedElement.type.toUpperCase() == 'BUTTON' || clickedElement.type.toUpperCase() == 'SUBMIT'))) {
     showBusysign();
   }
 }
</script>

And finally render the busy indicator somewhere in your page:

<div id="bysy_indicator">Loading ...</div>

This code has been tested on both IE and Firefox (06/2008).

Special circumstances

For example, if you redirect to external pages, you must skip the busy
indicator. This means that you might have to use some clue in your
button or link to omit the busy indicator.

    if ((clickedElement.tagName.toUpperCase() == 'A' 
          && ((clickedElement.target == null) || (clickedElement.target.length <= 0))
          && (clickedElement.href.lastIndexOf('#') != (clickedElement.href.length-1))
          && (!('nobusy' in clickedElement))
          && (clickedElement.href.indexOf('skype') < 0)
          && (clickedElement.href.indexOf('mailto') < 0)
          && (clickedElement.href.indexOf('WicketAjaxDebug') < 0)
          && (clickedElement.href.lastIndexOf('.doc') != (clickedElement.href.length-4))
          && (clickedElement.href.lastIndexOf('.csv') != (clickedElement.href.length-4))
          && (clickedElement.href.lastIndexOf('.xls') != (clickedElement.href.length-4))
          && ((clickedElement.onclick == null) || (clickedElement.onclick.toString().indexOf('window.open') <= 0))
          ) 
      || (clickedElement.parentNode.tagName.toUpperCase() == 'A' 
          && ((clickedElement.parentNode.target == null) || (clickedElement.parentNode.target.length <= 0))
          && (clickedElement.parentNode.href.indexOf('skype') < 0)
          && (clickedElement.parentNode.href.indexOf('mailto') < 0)
          && (clickedElement.parentNode.href.lastIndexOf('#') != (clickedElement.parentNode.href.length-1))
          && (clickedElement.parentNode.href.lastIndexOf('.doc') != (clickedElement.parentNode.href.length-4))
          && (clickedElement.parentNode.href.lastIndexOf('.csv') != (clickedElement.parentNode.href.length-4))
          && (clickedElement.parentNode.href.lastIndexOf('.xls') != (clickedElement.parentNode.href.length-4))
          && ((clickedElement.parentNode.onclick == null) || (clickedElement.parentNode.onclick.toString().indexOf('window.open') <= 0))
          ) 
      || (
         ((clickedElement.onclick == null) 
           || 
           ((clickedElement.onclick.toString().indexOf('confirm') <= 0)
            && (clickedElement.onclick.toString().indexOf('alert') <= 0) 
            && (clickedElement.onclick.toString().indexOf('Wicket.Palette') <= 0)))
         && (clickedElement.tagName.toUpperCase() == 'INPUT' && (clickedElement.type.toUpperCase() == 'BUTTON' 
              || clickedElement.type.toUpperCase() == 'SUBMIT' || clickedElement.type.toUpperCase() == 'IMAGE'))
         )
      ) {
      showBusysign();
    }

Child pages