Skip to site navigation (Press enter)

[CONF] Apache Wicket > Generic Busy Indicator (for both Ajax and non-Ajax submits)

confluence Tue, 05 Mar 2013 00:46:07 -0800

     Generic Busy Indicator (for both Ajax and non-Ajax submits)
    Page edited by             Marcus Bosten
    
        
        Comment:
        added some code for usage along with wicket 6

    
        

                         Changes (2)
                                 
    

                    
    
            ...

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

            h3. with Wicket 6 one can use the following code 

             

            {code} 
<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> 
{code} 
 

            h3. Special circumstances 
 

            ...

    
            
    
                            Full Content
                    
        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).
with Wicket 6 one can use the following code


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

    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
    
        
        
            Change Notification Preferences
        
        View Online
        |
        View Changes
                |
        Add Comment
 ...
 {code} 
This code has been tested on both IE and Firefox (06/2008).
+h3. with Wicket 6 one can use the following code
+{code} 
<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> 
{code}
 h3. Special circumstances
 ...