12 Replies Latest reply on Jan 12, 2016 5:53 AM by Siva P

    How to use showpopupPanel in RF4x?

    Siva P Master

      Hi,

       

      How to use showModalPanel in Richfaces4x?Can i use like below?How to use showpopup in the javascript file.??

       

      RF 3X: Richfaces.showModalPanel('wait-dialog');

       

      RF4X: Richfaces.showpopupPanel('wait-dialog');

       

      xhtml code:

      <a4j:status id="mod" onstart="onRequestStart()"

                  onstop="onRequestEnd()" />

      <rich:popupPanel id="wait-dialog" resizeable="false" autosized="false"

                  width="130" height="100" headerClass="popupborder" moveable="false"

                  shadowOpacity="3">

                  <center>

                      <h:graphicImage value="/img/ajax_load.gif" width="70px"

                          height="70px" />

                  </center>

                  <br></br>

              </rich:popupPanel>

       

       

      Javascript:

      function showWaitDialog() {

          //avoid attempt to show it if it is already shown

          if (!waitDialogShown) {

              RichFaces.showpopupPanel('wait-dialog');

              waitDialogShown = true;

          }

      }

       

      function onRequestStart() {

          if (useTimerBeforeShowWaitDialog) {

              waitDialogTimer = setTimeout("showWaitDialog();", waitDialogTimeout);

          } else {

              showWaitDialog();

          }

      }

      function onRequestEnd() {

          if (waitDialogShown) {

              RichFaces.hidepopupPanel('wait-dialog');

              waitDialogShown = false;

          } else if (useTimerBeforeShowWaitDialog && waitDialogTimer) {

              clearTimeout(waitDialogTimer);

          }

      }

       

      Thank you.

        • 1. Re: How to use showpopupPanel in RF4x?
          Michal Petrov Master

          The method was removed, use either #{rich:component('panel')}.show() or RichFaces.component('form:panel').show()

          • 2. Re: How to use showpopupPanel in RF4x?
            Siva P Master

            Hi Petrov,

             

            Thank you for your reply.

             

            RF Version: Specification-Version: 4.2.2.Final

            How to use the RichFaces.component('form:panel').show() in JavaScript file.

            Please refer the images below,


            Image 2:

            RF_Problem.png

            Image 2:

            RF_Problem_1.png

             

            Image 3:

            RF_Problem_2.png


            I have tried with below also,

            document.getElementById('reportingFormSI:wait-dialog').component.show();


            But expected behaviour is not working.

            How to resolve it.????

             

            • 3. Re: How to use showpopupPanel in RF4x?
              Michal Petrov Master

              If you don't say what version you're using I'm expecting it's the latest.

               

              In 4.2.x it's RichFaces.$ instead of RichFaces.component, or document.getElementById('form:panel').rf.component if you want to go that way. (It's in the docs.)

              • 4. Re: How to use showpopupPanel in RF4x?
                Siva P Master

                I am getting an error in Fire-bug console like ,

                Error:

                TypeError: RichFaces.$(...) is undefined.

                 

                bosch.js File:

                 

                RichFaces.$('reportingFormSI:wait-dialog').show();

                RichFaces.$('reportingFormSI:wait-dialog').hide();

                 

                As I mentioned Earlier comment,I am using 4.2.3 Final Version.

                RF_VERSION.png

                 

                Thank you.

                • 5. Re: How to use showpopupPanel in RF4x?
                  Michal Petrov Master

                  I don't know what I'm supposed to see in the picture but if you scroll down RichFaces.$ should be defined on line 55.

                  • 6. Re: How to use showpopupPanel in RF4x?
                    Siva P Master

                    Below is my Java script file,

                    bosch.js

                    //javascript

                    var waitDialogShown = false;

                    var useTimerBeforeShowWaitDialog = true;

                    var waitDialogTimeout = 50;

                    var waitDialogTimer;

                     

                    function showWaitDialog() {

                        //avoid attempt to show it if it is already shown

                        if (!waitDialogShown) {

                            //RichFaces.showpopupPanel('wait-dialog');

                           RichFaces.$('reportingFormSI:wait-dialog').show();                     // For Show the wait-dialog box

                            //document.getElementById('reportingFormSI:wait-dialog').component.show();

                            waitDialogShown = true;

                        }

                    }

                     

                    function onRequestStart() {

                        if (useTimerBeforeShowWaitDialog) {

                            waitDialogTimer = setTimeout("showWaitDialog();", waitDialogTimeout);

                        } else {

                            showWaitDialog();

                        }

                    }

                    function onRequestEnd() {

                        if (waitDialogShown) {

                            //RichFaces.hidepopupPanel('wait-dialog');

                            RichFaces.$('reportingFormSI:wait-dialog').hide();                  // For Hide the wait-dialog box

                            //document.getElementById('reportingFormSI:wait-dialog').component.hide();

                            waitDialogShown = false;

                        } else if (useTimerBeforeShowWaitDialog && waitDialogTimer) {

                            clearTimeout(waitDialogTimer);

                        }

                    }

                     

                    function applyModalPanelEffect(panelId, effectFunc, params, hide) {

                        if (panelId && effectFunc) {

                            var modalPanel = $(panelId);

                            if (modalPanel && modalPanel.component) {

                                var component = modalPanel.component;

                                var div = component.getSizedElement();

                                if (hide) {

                                    Element.hide(div);

                                }

                                effectFunc.call(this, Object.extend({

                                    targetId : div.id

                                }, params || {}));

                            }

                        }

                    }

                     

                    function showModalPanelWithEffect(panelId, showEffect, params) {

                        applyModalPanelEffect(panelId, showEffect, params, true);

                    }

                    Reporting.xhtml

                    <a4j:status id="mod" onstart="onRequestStart()"

                                onstop="onRequestEnd()" />

                            <rich:popupPanel id="wait-dialog" resizeable="false" autosized="false"

                                width="130" height="100" headerClass="popupborder" moveable="false"

                                shadowOpacity="3">

                                <center>

                                    <h:graphicImage value="/img/ajax_load.gif" width="70px"

                                        height="70px" />

                                </center>

                                <br></br>

                            </rich:popupPanel>

                     

                    But Still console error in Mozilla Fire fox browser as below,

                    Error:

                    TypeError: RichFaces.$(...) is undefined.

                     

                    Thank you.

                    • 7. Re: How to use showpopupPanel in RF4x?
                      Michal Petrov Master

                      Have you checked if the method is defined in the file? Can you execute it from console?

                      • 8. Re: How to use showpopupPanel in RF4x?
                        Siva P Master

                        Hi Petrov,

                         

                        Thank you for your reply.

                        I have executed it from console firefox, Still the same error,

                        Console_Error.png

                        Is this RF version issue?

                        • 9. Re: How to use showpopupPanel in RF4x?
                          Michal Petrov Master

                          The method is available in RichFaces 4.2.3.Final, it's been in RichFaces since 4.0. If you cannot execute it you need to check the sources and the actual RichFaces object (i.e. what methods it has), if you see the method in the source but not in the object then something might be overwriting it.

                          • 10. Re: How to use showpopupPanel in RF4x?
                            Siva P Master

                            Hi Petrov,

                            I could not able to debug it.

                            So I have implemented the code in different way as below,Which works fine.I just dropped JavaScript methodology.

                             

                            Sample.xhtml

                            <rich:popupPanel id="wait-dialog" resizeable="false" autosized="false"

                                        width="130" height="100" headerClass="popupborder" moveable="false"

                                        shadowOpacity="0" style="overflow:hidden;">

                                        <center>

                                            <h:graphicImage value="/img/ajax_load.gif" width="70px"

                                                height="70px" />

                                        </center>

                                        <br></br>

                                    </rich:popupPanel>

                            <a4j:status for="reportingRegion"

                                                onstart="#{rich:component('wait-dialog')}.show()"

                                                onstop="#{rich:component('wait-dialog')}.hide()" />

                            <a4j:region id="reportingRegion">

                            ....ur component and other stuffs.......................

                            ......................................

                            .................................................

                             

                            </a4j:region>

                             

                            Thank you.

                            • 11. Re: How to use showpopupPanel in RF4x?
                              Michal Petrov Master

                              #{rich:component('id')} gets translated into RichFaces.$('formId:id'), if it is working now then there is a problem with the original script.

                              • 12. Re: How to use showpopupPanel in RF4x?
                                Siva P Master

                                Later some time i will verify the script which has problem.

                                Thank you.