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

    <rich:popupPanel> onresize & onmove

    jjsteward

      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:

       

       

      @ManagedBean

      @SessionScoped

      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 ...

          <h:body>

               

                .. other includes ...

       

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

          </h:body>
      </f:view>
      </html>

       

       

      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 ....

         </a4j:outputPanel>

        </h:form>

       

      </rich:popupPanel>

      </ui:composition>

       

       

      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>

       

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

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

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

        </a4j:jsFunction>

      </h:form>

       

      <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.

       

      Thanks,

      Jamie

        • 1. <rich:popupPanel> onresize & onmove
          boy18nj

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

           

          Where have you defined the a4j:jsFunction?

          • 2. <rich:popupPanel> onresize & onmove
            jjsteward

            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
              boy18nj

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

               

              What are your sequence of actions?

              • 4. <rich:popupPanel> onresize & onmove
                jjsteward

                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
                  boy18nj

                  You can try two methods,

                   

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

                   

                  or

                   

                  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
                    jjsteward

                    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" />
                                        </h:inputTextarea>

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

                                             action="#{logNotesBean.saveLogNote(note)}"

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

                     

                                  </h:panelGrid>

                     

                              </a4j:outputPanel>

                     

                         </h:form>

                     

                    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?