6 Replies Latest reply on Feb 6, 2009 11:16 PM by Binesh Gummadi

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

    Val Sw Expert
      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
         }     
      }
        • 1. Re: Disable parent browser on xxxxHome.update() till process ends
          Francisco Jose Peredo Noguez Master

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

          • 2. Re: Disable parent browser on xxxxHome.update() till process ends
            Val Sw Expert
            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>
            • 3. Re: Disable parent browser on xxxxHome.update() till process ends
              Val Sw Expert

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


              Thanks

              • 4. Re: Disable parent browser on xxxxHome.update() till process ends
                Binesh Gummadi Novice

                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.

                • 5. Re: Disable parent browser on xxxxHome.update() till process ends
                  Val Sw Expert

                  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


                  • 6. Re: Disable parent browser on xxxxHome.update() till process ends
                    Binesh Gummadi Novice

                    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.