Disable parent browser on xxxxHome.update() till process ends

[valatharv]

I am calling a process which takes few seconds, what is the best technique to disable parent browser (display something like request in progress....) on button click till process is complete.

Example:
--On clicking "Update" button, quantExperimentHome.update() is called.
--Then I am using Observer in ExternalApplicationInvoker.java which does some process

QuantExperimentEdit.xhtml
-------------------------
<h:commandButton id="update" value="Update"
     action="#{quantExperimentHome.update}"
       rendered="#{quantExperimentHome.managed}">
</h:commandButton>

QuantExperimentHome.java
------------------------
@Name("quantExperimentHome")
public class QuantExperimentHome extends EntityHome<QuantExperiment> {
     public String update(){     
          return super.update();
     }
}

ExternalApplicationInvoker.java
-------------------------------
@Name("externalApplicationInvoker")
@Scope(ScopeType.STATELESS)
public class ExternalApplicationInvoker
{
   @Observer("org.jboss.seam.afterTransactionSuccess.QuantExperiment")
   public void experimentSavedOrUpdated()
   {
     //DOES SOME PROCESSING WHICH TAKES APPROX 30 SECONDS
   }     
}

[luxspes]

I use a4j:status combined with a rich:modalPanel for that.

[valatharv]

Thanks for the reply....

I looked at Example 1 (http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.jsf;jsessionid=73B2DB2F221DA03B27ED7FFB8B082491?c=modalPanel&tab=usage)

I have a form with multiple richpanels.

My doubt is how can I call modal on "Update" click and then once processing is complete modal should be off and parent browser enabled.

Please suggest for this... any sample.... also how can I use "a4j:status" (newbie) here ...

<h:form id="quantExperiment" styleClass="edit">
     
     <rich:panel>......</rich:panel>
     <rich:panel>......</rich:panel>

     <h:commandButton id="update" title="Updates the current experiment"
            value="Update Experiment"
           action="#{quantExperimentHome.update}"
            rendered="#{quantExperimentHome.managed}"
            onclick="if (!confirm('Are you sure you want to update this experiment ?')) return false;">
     </h:commandButton>

</h:form>

[valatharv]

I would really appreciate, if you can please provide code/ example, I need it urgently...

Thanks

[binnyg]

ModalPanel     

<rich:modalPanel id="ajaxLoadingModalBox" shadowDepth="0" height="25" width="130" top="0" left="0" zindex="2000"
          resizeable="false">
          <table cellpadding="0" cellspacing="0" border="0">
               <tr>
                    <td valign="middle"><h:outputText value="Processing" /><rich:spacer width="10px" height="1px" /></td>
                    <td><h:graphicImage value="images/icons/ajax-loader-simple.gif" styleClass="ajax-loader" /></td>
               </tr>
          </table>
     </rich:modalPanel>

You can use it as follows in your xhtml files

<script type="text/javascript">
          var infoWindowAMShown = false;
          var infoWindowAMTimer;
          function showModalInfoWindow(timeout) {
               infoWindowAMTimer = setTimeout("if(!infoWindowAMShown){Richfaces.showModalPanel('ajaxLoadingModalBox');infoWindowAMShown=true;}", timeout);
          }

          function hideModalInfoWindow() {
               if (infoWindowAMShown) {
                    Richfaces.hideModalPanel('ajaxLoadingModalBox');
                    infoWindowAMShown=false;
               } else {
                    if(infoWindowAMTimer)clearTimeout(infoWindowAMTimer);
               }
          }
     </script>


     <a4j:status for="contents-tab-region" id="a4j-status-content-loading-panel"
          onstart="showModalInfoWindow(100);" onstop="hideModalInfoWindow()" />

CSS

.ajax-loader {
     border: 0;
     vertical-align: middle;
     margin-top: 3px;
}

You can see it in action @ http://scar.rivetlogic.com
You can also get source from here http://wiki.rivetlogic.com/display/SCAr/Downloads

Please do not forget to rate if it was helpful.

[valatharv]

Thanks a lot for your reply, I checked the post it looks very good.

But as per requirement, we need to disable the parent browser, so that user should not be able to click any link on parent browser.

I was able to accomplish it to some extent where I was able to open the modal panel, it works fine when there is NO validation error, but fails if there is any validation error on page, please check this and help, I would be very thankful...

http://www.seamframework.org/Community/StrangeBehaviourForXhtmlWhenUsingModal

[binnyg]

Disabling the parent browser is exactly what you would achieve with the above approach. We used css tricks to make the background transparent. User thinks it is a status message but rather it is a modal panel with transparent background. You cannot click on the parent browser while your request is being processed.