<a4j:status> with grey out affect while loading

[skidvd]

Hello,

I'm sorry for the beginner question, but I seem to be having difficulty figuring this out. I have multiple <a4j:outputPanel>s on my display - each of them are updated via a4j actions on other controls in the UI that specifiy a rerender value for the panel. I would like to achieve an effect that I have seen many other places; namely that the updating panel is opaquely greyed out during the ajax operation. I'm attempting to use <a4j:status> for this as follows:

 <a4j:region id="contentRegion">
 <a4j:status id="mainStatus" forceId="true">
 <f:facet name="start">
 <t:div style="position: relative; top: 0px; left: 0px; z-index: 500; width: 100%; height: 100%; background-color: #CCCCCC; opacity: 0.35; -moz-opacity: 0.25; filter: alpha(opacity=35);">
 <h:graphicImage value="/images/ajax-loader.gif"/>
 </t:div>
 </f:facet>
 </a4j:status>

 <a4j:outputPanel id="contentPanel">
 <rich:panel id="main">
 <f:facet name="header">
 <h:outputText value="#{mainController.contentView} Title Goes Here"/>
 </f:facet>

 <a4j:include viewId="#{mainController.contentView}" id="contentView"/>
 </rich:panel>
 </a4j:outputPanel>
 </a4j:region>

The panel updates as desired and the status div and icon also appear as desired, but they do NOT overlay the contentRegion or contenPanel (they are rendered above them).

I also thought about using the <a4j:effect>, but could not figure out how it would be applicable in this need - although it seems like it should?

I'd appreciate any and all help, as I'm sure someone has this common behavior already working?

[ilya_shaikovsky]

http://www.jboss.org/community/docs/DOC-11863

[skidvd]

Ilya,

Thanks for the reply and assistance. This works and is close, but not really what I am looking for. As I have multiple ajax updated outputPanels on my display concurrently, I only want to grey out a single one at a time (i.e. NOT app modal behaviour).

The following snippet is a bit closer to what I need than what I posted earlier, but is still not quite there.... Is there a better way to achieve what I looking for = i.e.non-app modal gray out of a outputPanel during ajax operations that update it?

 <a4j:status id="mainStatus" forceId="true">
 <f:facet name="start">
 <t:div style="position: absolute; top: _toppx; left: _leftpx; z-index: 500; width: 100%; height: 100%; background-color: #CCCCCC !important; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50);">
 <h:graphicImage value="/images/ajax-loader.gif"
 style="position: relative; top: 50%; left: 50%; opacity: 1 !important; -moz-opacity: 1 !important; filter: alpha(opacity=100) !important;"/>
 </t:div>
 </f:facet>
 </a4j:status>