This Confluence has been LDAP enabled, if you are an ASF Committer, please use your LDAP Credentials to login. Any problems file an INFRA jira ticket please.

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

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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:

Code Block
<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:

Code Block
<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:

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

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

with Wicket 6 one can use the following code

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

 function setupFunc() {
   document.getElementsByTagName('body')[0].onclick = clickFunc;
   hideBusysign();
   Wicket.Event.subscribe('/ajax/call/beforeSend', function( attributes, jqXHR, settings ) {
	   showBusysign()
	    });
   Wicket.Event.subscribe('/ajax/call/complete', function( attributes, jqXHR, textStatus) {
	   hideBusysign()
	    });
 }

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

 function showBusysign() {
   document.getElementById('ajaxveil').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'))) 
     && clickedElement.parentNode.id.toUpperCase() != 'NOBUSY' ) {
     showBusysign();
   }
 }
</script>
</head>
<body>
  <div id="ajaxveil">
   <h1>&nbsp;&nbsp; ... &nbsp;&nbsp;</h1> 
   </div>

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.

Code Block
    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();
    }

More on the topic: http://www.nabble.com/generalized-way-to-ignore-mouse-input-during-screen-refresh--td21379945.html#a21381260