6 Replies Latest reply on Mar 21, 2011 7:50 PM by Jamie Steward

    <rich:popupPanel> onresize & onmove

    Jamie Steward Newbie

      Hi all,


      Could anyone help me with this problem? We are using the latest M6 snapshot... 


      I am trying to save the state & position of a popup so that after a redirect I can re-display the popup in exactly the same position.


      I have a session scoped bean with the following fields:





      public class LogNotesBean implements Serializable {

          private boolean popupActive = false;

          private String popupWidth = "550";

          private String popupHeight = "500";

          private String popupTop = "100";

          private String popupLeft = "700";


           .... accessors here ....





      I have a masterLayout.xhtml file that includes my logNotes.xhtml page:



      <html .. namespaces ...>

      <f:view contentType="text/html">

          .. header properties ...



                .. other includes ...


               <ui:include src="/modal/logNotes.xhtml"/>




      Finally here is my logNotes.xhtml page:



      <ui:composition .. namespaces ...>

      <rich:popupPanel id="logNotesModal" modal="false" autosized="false" resizeable="true" show="#{logNotesBean.popupActive}" top="#{logNotesBean.popupTop}" left="#{logNotesBean.popupLeft}"
        width="#{logNotesBean.popupWidth}" height="#{logNotesBean.popupHeight}">


        <h:form id="logNotesForm">

         <a4j:outputPanel id="logNotesOutputPanel">

           ... fields here ....








      I've tried creating an <a4j:jsFunction> but it doesn't do anything (I think because it is not in the same <h:form>):




      <h:form id="popupForm">

        <a4j:jsFunction id="popupResize" name="popupResize">

         <a4j:param name="width" assignTo="#{logNotesBean.popupWidth}"  />

         <a4j:param name="height" assignTo="#{logNotesBean.popupHeight}" />



        <a4j:jsFunction id="popupMove" name="popupMove">

         <a4j:param name="top" assignTo="#{logNotesBean.popupTop}" />

         <a4j:param name="left" assignTo="#{logNotesBean.popupLeft}" />




      <rich:popupPanel onresize="popupResize(this.width,this.height)" onmove="popupMove(this.top,this.left)" .. other attributes>



      I cannot surround the whole <rich:popupPanel> with a form because there is already a form element inside the popup.  This is per documentation:  http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html_single/#sect-Component_Reference-Panels_and_containers-richpopupPanel


      Please let me know if there is another solution to this problem.




        • 1. <rich:popupPanel> onresize & onmove
          Rocky S Master

          remove the h:form from inside and use it around rich:popupPanel


          Where have you defined the a4j:jsFunction?

          • 2. <rich:popupPanel> onresize & onmove
            Jamie Steward Newbie

            When I move <h:form> outside of <rich:popupPanel> the functionality inside the popup stops working!


            The <a4j:jsFunction> is defined outside the <rich:popupPanel>.

            • 3. <rich:popupPanel> onresize & onmove
              Rocky S Master

              this <h:form id="popupForm"> is defined in which .xhtml?


              What are your sequence of actions?

              • 4. <rich:popupPanel> onresize & onmove
                Jamie Steward Newbie

                Both forms are loaded on the same XHTML file.


                Sequence of Actions:

                1) Open <rich:popupPanel> using <a4j:commandLink>

                2) Move or Resize panel.

                • 5. <rich:popupPanel> onresize & onmove
                  Rocky S Master

                  You can try two methods,


                  1) add <a4j:region> or <a4j:form> outside rich:popuppanel to ajaxify your component (whichever works for you)




                  2) don't define js function, call directly from event, nest this event inside your rich:popuppanel

                  <a4j:support event="onresize" action="#{logNotesBean.popupWidth(document.getElementById('form:panel').width))}"></a4j:support>




                  Here I am trying to understand your limitation:

                  When I move <h:form> outside of <rich:popupPanel> the functionality inside the popup stops working!


                  Show the code, what functionality stops working?

                  • 6. Re: <rich:popupPanel> onresize & onmove
                    Jamie Steward Newbie

                    The functionality I was referencing is a basic form, field, submit scenario:


                         <h:form id="logNotesForm">


                              <a4j:outputPanel id="logNotesOutputPanel">


                                   <h:panelGrid columns="1" width="100%">


                                        <rich:message for="logNoteTextField" ajaxRendered="true" />
                                        <h:inputTextarea value="#{note.noteText}" >
                                              <a4j:ajax event="blur" render="logNoteTextField" execute="@this" />

                                        <a4j:commandLink value="#{m_.save}"


                                             execute="@form" render="logNotesOutputPanel" />








                    I tried <a4j:region> outside the <rich:popupPanel> and it didn't work.


                    What is this <a4j:support> or <a4j:form> tag?  They don't exist in the RichFaces 4 taglib?