Versions Compared

Old Version 5

changes.mady.by.user Unknown User (mchidhambaram@gmail.com)

Saved on

compared with

New Version Current

changes.mady.by.user Marcus Bosten

Saved on

Key

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

...

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 bysy 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>

...

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.

...