2 Replies Latest reply on Nov 25, 2008 11:21 AM by Todd Gould

    <a4j:status> with grey out affect while loading

    Todd Gould Novice

      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?

        • 2. Re: <a4j:status> with grey out affect while loading
          Todd Gould Novice

          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>