11 Replies Latest reply: Jan 28, 2012 8:39 AM by iabughosh RSS

How to call rich:popupPanel block from javascript.

Jaikrat Singh Newbie

Hello All,

   Like in RF3.3.x we have one component rich:modalPanel which can be called from the java script and make it visible, using the method like below.

 

<script type="text/javascript">

           javascript:Richfaces.showModalPanel('someId}')

      </script>

 

Since the modalPanel is not available since RF4.x and we have to use the popupPanel instead.

 

Does anyone have any idea in how to call rich:popupPanel from javaScript code and make it visible on the page like above method.

 

Thanks

Jaikrat Singh

  • 1. Re: How to call rich:popupPanel block from javascript.
    iabughosh Master

    hello Jaikrat, you can access modaPanel from java script :

    <h:head>

    <script>

    function showPop() {

                                            #{rich:component('myPop')}.show();

    }

    </script>

    </h:head>

     

    in your h:body

    <h:commandButton value="show pop" onclick="showPop(); return false;"/>

     

    regards.

  • 2. Re: How to call rich:popupPanel block from javascript.
    Jaikrat Singh Newbie

    Hey Ibrahim,

        Thanks for your yreply, its acutally working to some extent. But I have two issue with the above code

     

    1. There is some compilation error in the jsp code "#{rich:component('simplePopup1')}.show();" saying "Invalid Character" in side the method showPopup().
    2. But fortunatly its not failing the code and I get the popup window but not permanet. I get its for 0.5 second and then it disappears.

     

         Any idea, why its happening?

     

    Thanks

    Jaikrat Singh

  • 3. Re: How to call rich:popupPanel block from javascript.
    iabughosh Master

    you need to add return false; when you call your js function to prevent page submit and refreshing :

    onclick="showPop(); return false;"

     

    regards.

  • 4. Re: How to call rich:popupPanel block from javascript.
    Jaikrat Singh Newbie

    Thats sound great, will try with that also. But Can we write the line "#{rich:component('simplePopup#{popupBean.popupDescriptor.id}')}.show();" inside the javascript but not any method.

     

    Like I am trying like below.

     

    <h:form id="form1">

            <script type="text/javascript">

            window.onload=function(){

                alert('h1');

                #{rich:component('simplePopup#{popupBean.popupDescriptor.id}')}.show();

            }

            </script>

        </h:form>

     

    but when I do the viewSource code of the page its giving error and only shows the ".show();" part. Rest, its eating.

     

    Any idea??

     

    Thanks

    Jaikrat Singh

  • 5. Re: How to call rich:popupPanel block from javascript.
    iabughosh Master

    write your javascript code inside .xhtml file instead of js file and inlucde it using ui:include:

     

    <h:head>

    ....

    <ui:include src="/resources/js/reg.xhtml"/>

    </h:head>

     

    PFA, to see how javascript code can be written inside .xhtml page.

  • 6. Re: How to call rich:popupPanel block from javascript.
    Jaikrat Singh Newbie

    As such when I changed the code to

     

    <h:form id="form1">

            <script type="text/javascript">

            window.onload=function(){

                alert('h1');

                javascript:rich:component('simplePopup1').show();

            }

            </script>

        </h:form>

     

    And in the viewSource of the page it say something like

     

        <script type="text/javascript">

                             window.onload=function(){

                                      alert('hi');

                                      javascript:rich:component('simplePopup1').show();

                             }

             </script>

     

    I get the alert with 'hi' msg but this popup does not appear.

     

    As such the "#{rich:component('simplePopup1')}" is the javascript implementation of code like document.getElementById('popupContainer:popupView1:simplePopup1')

    But  the below code is also not working.

     

    window.onload=function(){

                            alert('hi');

                           var temp = document.getElementById('popupContainer:popupView1:simplePopup1');

                            alert(temp);

                           temp.style.display='block';

                           alert("hello");

                        }

     

    I get the alerts like 'hi', 'some HTMLObject' and "hello". But not the my popup window at all.

     

    Any thought.

     

    Thanks

    Jaikrat

     


  • 7. Re: How to call rich:popupPanel block from javascript.
    iabughosh Master

    there is no need to this walkaround, you can try my previous post if you want to separate your js code in a file, else keep using #{ric:component('')}.

  • 8. Re: How to call rich:popupPanel block from javascript.
    Jaikrat Singh Newbie

    In my case, actually I do not have to keep my javascript code inside one method. Below is my scenario. Please have a look.

     

    1. I have one page with some button/link. In that same page, I have second xhtml file imported with ui:include.
    2. In that second file, I have one more include of the third xhtml file(i.e. <ui:include src="#{popup.uri}">) . This import is having ony of my bean's variable and that variable will have the path of one of 2-3 xhtml files. Based on some decision, this variable will be populated.
    3. I have 2-3 files, third kind of file, that is having this rich:popupPanel code. In that file I have to write thier own javascript. But not in any method. whenever appropriate third xhtml is decided and loaded later, automatically the javascript should be called and that will make popup appear.

     

    I hope, I put my self correct. Please revert if anything is not clear.

     

    Thanks

    Jaikrat Singh

  • 9. Re: How to call rich:popupPanel block from javascript.
    iabughosh Master

    ok Singh, if your java script code is only to open/close popup panels without a specific logic you can make one javascript method that takes popup id and include it in page one:

    <script type="text/javascript">

          function showPop(popupId) {

          #{rich:component(popupId)}.show();

              }

    </script>

     

    else if your popup's have some different logic you can include your js code conditionally as follow :

    <h:head>

         <ui:include src="#{js.uri}"/>

    </h:head>

    <h:body>

         ....

         <ui:include src="#{popup.uri}"/>

         ...

    </h:body>

     

    hopes that will help.    

  • 10. Re: How to call rich:popupPanel block from javascript.
    Jaikrat Singh Newbie

    Doing somewhat you suggested, but getting below error.

     

    RichFaces.ui is undefined.

     

    Any idea, what could be the reason.

     

    Thanks

    Jaikrat Singh

  • 11. Re: How to call rich:popupPanel block from javascript.
    iabughosh Master

    please post your .xhtml page.