4 Replies Latest reply on Jul 31, 2008 2:08 PM by shadowcreeper

    modalPanel usage pattern

    demetrio812

      Hi!
      I want to use a modalPanel to show the test of a selected message, all the messages are listed in a dataTable so at the first time I thought to put a modal panel in every row with the button to call it, but I saw that the ids are generated in the following way:

      id="fomid:tableid:rownumber:modalpanelid"


      the problem is to find out the row number (without bind the table), do at the end I decided to put a modal panel outside the form and dynamically load the data in it, so the code of the modal panel (putted out of the form) is:

      <rich:modalPanel id="mp1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
       <f:facet name="header">
       <h:outputText value="#{gMessaggi.messaggioSelezionato.oggetto}" />
       </f:facet>
       <f:facet name="controls">
       <h:graphicImage value="/templates/images/button/close.png" style="cursor:pointer"
       onclick="Richfaces.hideModalPanel('mp1')" />
       </f:facet>
       <h:outputText escape="false" value="#{gMessaggi.messaggioSelezionato.testo}"></h:outputText>
      </rich:modalPanel>
      


      then to dynamically load the content I used to following commandButton (inside a column a the dataTable):

      <a4j:commandButton styleClass="Btn1" value="Leggi" actionListener="#{gMessaggi.impostaLetto}" reRender="mp1"
      oncomplete="javascript:Richfaces.showModalPanel('mp1',{width:450, top:200})">
       <f:setPropertyActionListener value="#{item}" target="#{gMessaggi.messaggioSelezionato}" />
      </a4j:commandButton>
      


      So I use the action listener to set the message as read, the setPropertyActionListener to save the row, the reRender to reload the content of the modal panel and when all those finished I open the modal panel.

      Is that the right pattern or there are better one?

      thanks

      Demetrio

        • 1. Re: modalPanel usage pattern

          yes, the second approach is much better than the first one.

          • 2. Re: modalPanel usage pattern
            shadowcreeper

            i tried this approach but had problems:

            my modalPanel contains 2 <rich:calendar>s and an <h:inputText>. it is inside its own form and region:

             <a4j:form id="modalPanelForm">
             <a4j:region id="modalPanelRegion">
             <rich:modalPanel id="modalPanel"
             autosized="true"
             moveable="true"
             zindex="1000">
             <f:facet name="header">header stuff</f:facet>
             <a4j:outputPanel id="modalPanelEditor" layout="block">
             label, h:inputText, save a4j:commandButton are here
             2 rich:calendars are here (from and to date selectors)
             calendars go something like this:
             <rich:calendar id="toDateSelector"
             value="#{modelBean.toDate}"
             popup="false"
             datePattern="MMM d, yyyy"
             showApplyButton="false"
             enableManualInput="false"
             showInput="false"
             todayControlMode="scroll"
             required="false"/>
             </a4j:outputPanel>
             </rich:modalPanel>
             <script type="text/javascript">
             function updateCalendarsAndShowModalPanel ()
             {
             #{rich:component( 'fromDateSelector' ) )}.showSelectedDate();
             #{rich:component( 'toDateSelector' ) )}.showSelectedDate();
             #{rich:component( 'modalPanel' )}.show();
             }
             </script>
             </a4j:region>
             </a4j:form>
            


            in a different place i have this:
             <a4j:form id="buttonForm">
             <a4j:region renderRegionOnly="false">
             <a4j:commandButton image="/images/plus.gif"
             actionListener="#{controllerBean.updateData}"
             oncomplete="updateCalendarsAndShowModalPanel();"
             status="mainStatusPanel"
             reRender="modalPanel"/>
             </a4j:region>
             </a4j:form>
            


            in case it matters: i am using JBoss 4.0.5 with Facelets 1.1.14, MyFaces 1.2.3, Tomahawk 1.1.6 and RichFaces 3.2.0.SR1.

            the controller backing bean's updateData(ActionEvent ignored) method simply decides which date range is being edited and updates the model bean which when the calendars are reRendered should be displayed in the modal panel.

            when i take out the reRender="modalPanel", the modalPanel displays but the calendars obviously do not get their selectedDates updated from the backing bean. if i reRender the modalPanel or either of the calendars, then the oncomplete script's #{rich:component( 'calendar or modalPanel id' )} which translates to document.getElementById('id').component returns undefined (checked through firebug) thus throwing an error and never displaying the modalPanel. if i take the ".component" off the end of the translated output, i get the div which is the calendar or modalPanel container.

            if i put a setTimeout( 'updateCalendarsAndShowModalPanel ();', 500 ) into the oncomplete, it does not get 'undefined' from #{rich:component('id')} and works as expected (except that the status has a half second where it does not show). but this is not clean.

            can somebody please explain this to me?

            when does oncomplete get run? after reRender finishes or parallel to its execution?

            must these pieces be in some sort of order inside form/region/etc. with some specific args (such as the a4j:region's renderRegionOnly="false") ???

            thanks.

            • 3. Re: modalPanel usage pattern
              daniel.soneira

              You got the nesting of the form / modalPanel wrong. It should be like this:

              <rich:modalPanel>
               <a4j:form>
               ...
               </a4j:form>
              </rich:modalPanel>
              


              I would also nest the region INSIDE the modalPanel.

              • 4. Re: modalPanel usage pattern
                shadowcreeper

                OK, that has been fixed:

                 <rich:modalPanel id="modalPanel"
                 autosized="true"
                 moveable="true"
                 zindex="1000">
                 <f:facet name="header">header stuff</f:facet>
                 <a4j:form id="modalPanelForm">
                 <a4j:region id="modalPanelRegion">
                 <a4j:outputPanel id="modalPanelEditor" layout="block">
                 label, h:inputText, save a4j:commandButton are here
                 2 rich:calendars are here (from and to date selectors)
                 calendars go something like this:
                 <rich:calendar id="toDateSelector"
                 value="#{modelBean.toDate}"
                 popup="false"
                 datePattern="MMM d, yyyy"
                 showApplyButton="false"
                 enableManualInput="false"
                 showInput="false"
                 todayControlMode="scroll"
                 required="false"/>
                 </a4j:outputPanel>
                 </a4j:region>
                 </a4j:form>
                 </rich:modalPanel>
                
                 <script type="text/javascript">
                 function updateCalendarsAndShowModalPanel ()
                 {
                 #{rich:component( 'fromDateSelector' ) )}.showSelectedDate();
                 #{rich:component( 'toDateSelector' ) )}.showSelectedDate();
                 #{rich:component( 'modalPanel' )}.show();
                 }
                 </script>
                


                But the problem still exists, requiring the setTimeout for the call to updateCalendarsAndShowModalPanel().