Ajax4Jsf Modal Loading Windows

Ajax4Jsf's status tag (a4j:status) has alot of potential, but currently it's functionality is limited. With the combination of Lightbox 2.0, or basically any javascript developed to build the dom, you can achieve the look of any modal "Loading..." window.

Since the status tag does not include capability to fire javascript events(as of yet), we will use the modified lightbox script to go ahead and write everything to the dom, then let the a4j:status tag to hide it until we make an Ajax call.

*Update - I recently created a working demo application for this modal. Read the updated blog entry here.

Facelet Source

This just shows basic usage with the A4J framework


 <script type="text/javascript" src="/facelet-sandbox/js/scriptaculous-js-1.6.5/lib/prototype.js"></script> 

 <script type="text/javascript" src="/facelet-sandbox/js/scriptaculous-js-1.6.5/src/scriptaculous.js?load=effects"></script> 
 <script type="text/javascript" src="/facelet-sandbox/js/modal.js"></script> 

 <style type="text/css"> 
 @import "/facelet-sandbox/css/modal.css"; 

 <a4j:region id="stat1"> 
 <a4j:outputPanel id="list-body"> 
 <t:dataTable id="carIndex" 

 <ac:ajaxDataScroller id="scroll_1" 

 <a4j:status for="stat1" forceId="true" id="ajaxStatus"> 

 <f:facet name="start"> 
 <div id="loading-modal"></div> 



Css Source

Some generic css and important background styles at bottom:


/*Modal Window*/ 
#modal { 
 background-color: #eee; 
 padding: 10px; 

 border-bottom: 2px solid #666; 
 border-right: 2px solid #666; 

#modal-details { 
 font-size: 8px; /* originally 8px */ 
 padding-top: 4px; 

#modal-caption { 
 float: left; 
#loadingMsg { 
 float: right; 

#modal img { 
 border: none; 
 clear: both; 
#overlay img { 

 border: none; 
#overlay { 
 background-image: url(/facelet-sandbox/images/modal/overlay-black.png); 

* html #overlay { 
 background-color: transparent; 
 background-image: url(blank.gif); 
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/facelet-sandbox/images/modal/overlay-black.png", sizingMethod="scale"); 



This is our end result when you rerender a component using A4J. Btw, (you can modify the AjaxAnywhere js to do the same thing)