3 Replies Latest reply on Jan 3, 2008 8:23 AM by mtaal

    Is it possible to reRender a4j:include (in a modalPanel)?

    mtaal

      Hi,
      I have a modalPanel with a4j:include, when I click a link to open the modalPanel I would like to reRender the content of the modalPanel (an outputPanel in the modalPanel). However, when I add an a4j:include in the outputPanel rerendering does not seem to occur anymore. Not for the outputText in the outputPanel and neither of the a4j:include. When I remove the a4j:include rerendering works fine.

      Here is the modalPanel:

      
       <rich:modalPanel id="SearchBookAuthor" minHeight="200" minWidth="450">
       <f:facet name="header">
       <h:outputText value="Test" />
       </f:facet>
       <f:facet name="controls">
       <h:graphicImage value="/gfx/close.png" style="cursor:pointer"
       onclick="Richfaces.hideModalPanel('SearchBookAuthor')" />
       </f:facet>
       <h:form id="mpf">
       <a4j:outputPanel id="SearchBookAuthorPanel">
       <p>entityHome.showModalPanel: <h:outputText
       value="#{entityHome.showModalPanel}" /></p>
       <p>uri: <h:outputText value="#{uri}" /></p>
       <p>EntityName: <h:outputText value="#{entityList.entityName}" /></p>
       <a4j:include id="include" viewId="#{entityHome.showModalPanel}"/>
       </a4j:outputPanel>
       </h:form>
       </rich:modalPanel>
      


      and here is the code to open the modalPanel:
      <h:outputLink id="SearchBookAuthorLink" rendered="#{entityHome.formMode!='delete'}">
       <h:graphicImage value="/gfx/search.gif" />
       <a4j:support event="onclick" limitToList="true"
       action="#{entityHome.setShowModalPanel('/pages/library/WriterSelect.xhtml')}"
       ajaxSingle="true" reRender="mpf:SearchBookAuthorPanel" disableDefault="true"
       oncomplete="javascript:Richfaces.showModalPanel('SearchBookAuthor', {uri:'/pages/library/WriterSelect.xhtml'});">
      
       <a4j:actionparam name="entityName" value="Writer"
       assignTo="#{entityList.entityName}" />
       <a4j:actionparam name="maxResults" value="15"
       assignTo="#{entityList.maxResults}" />
      
       </a4j:support>
      </h:outputLink>
      
      


      Thanks for any help on this!
      gr. Martin

        • 1. Re: Is it possible to reRender a4j:include (in a modalPanel)
          jonckvanderkogel

          Hello Martin,
          We are doing pretty much the same as you are in our application. We implemented the modalPanel as a facelet, perhaps the code will be of some help to you.

          The modalPanel facelet:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:ui="http://java.sun.com/jsf/facelets"
           xmlns:h="http://java.sun.com/jsf/html"
           xmlns:f="http://java.sun.com/jsf/core"
           xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
           xmlns:rich="http://richfaces.ajax4jsf.org/rich">
          
          <ui:composition>
           <a4j:region renderRegionOnly="false">
           <rich:modalPanel id="#{modalPanelId}"
           height="600" top="20" left="112" width="900" resizeable="true"
           moveable="true">
           <f:facet name="header">
           <h:graphicImage height="10" value="/images/leeg.gif" />
           </f:facet>
           <h:panelGroup id="#{modalPanelContentId}">
           <div class="content">
           <a4j:outputPanel id="#{a4jOutputPanelId}">
           <a4j:include viewId="#{uri}" id="#{a4jOutputPanelId}_include" />
           </a4j:outputPanel>
           </div>
           </h:panelGroup>
           </rich:modalPanel>
           </a4j:region>
          </ui:composition>
          </html>
          


          The button to open the modalPanel:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:ui="http://java.sun.com/jsf/facelets"
           xmlns:f="http://java.sun.com/jsf/core"
           xmlns:c="http://java.sun.com/jstl/core"
           xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
          <ui:composition>
           <f:loadBundle basename="org.vrom.vi.dpvi.holmes.web.resources.zoeken" var="zoekLocatieMsg" />
          
           <c:if test="#{empty label}">
           <c:set var="label" value="#{zoekLocatieMsg['zoeken.label.zoeken']}" />
           </c:if>
           <c:if test="#{empty rendered}">
           <c:set var="rendered" value="true" />
           </c:if>
           <c:if test="#{empty disabled}">
           <c:set var="disabled" value="false" />
           </c:if>
           <a4j:region renderRegionOnly="false">
           <a4j:commandButton
           id="#{id}_zoekLocatieButton"
           styleClass="knop"
           value="#{label}"
           oncomplete="Richfaces.showModalPanel('mp3')"
           reRender="mp3Content"
           rendered="#{rendered}"
           disabled="#{disabled}">
           <f:setPropertyActionListener value="#{entityBean}" target="#{locatieModalPanelFacelet.entityBean}" />
           <f:setPropertyActionListener value="#{backingBean}" target="#{locatieModalPanelFacelet.backingBean}" />
           <a4j:actionparam value="#{field}" assignTo="#{locatieModalPanelFacelet.field}" />
           <a4j:actionparam value="#{reRender}" assignTo="#{locatieModalPanelFacelet.reRender}" />
           <a4j:actionparam value="#{false}" assignTo="#{zoekLocatieController.searchStarted}" />
           <f:setPropertyActionListener value="#{null}" target="#{zoekLocatieController.results}" />
           <a4j:actionparam value="/zoeken/zoekLocatie.xhtml" assignTo="#{locatieModalPanelFacelet.uri}" />
           </a4j:commandButton>
           </a4j:region>
          </ui:composition>
          </html>
          


          Kind regards, Jonck

          • 2. Re: Is it possible to reRender a4j:include (in a modalPanel)
            jonckvanderkogel

            Oops, I see I forgot to add a missing piece of code that you'll need as well, an implementation of the facelet:

            <holmes:modalPanel
             modalPanelId="mp3"
             a4jOutputPanelId="mp3Panel"
             modalPanelContentId="mp3Content"
             uri="#{locatieModalPanelFacelet.uri}"
             backingBean="#{locatieModalPanelFacelet.backingBean}"
             entityBean="#{locatieModalPanelFacelet.entityBean}"
             field="#{locatieModalPanelFacelet.field}"
             reRender="#{locatieModalPanelFacelet.reRender}"
             hideJavaScript="Richfaces.hideModalPanel('mp3');" />
            


            So as you can see as reRender attribute I am passing the id of the h:panelGroup wrapped around the a4j:include tag. I think your problem is located there.

            Kind regards, Jonck

            • 3. Re: Is it possible to reRender a4j:include (in a modalPanel)
              mtaal

              Bedankt Jonck dit werkte!

              To summarize what I did:
              1) put the modalpanel in a separate facelet (see below)
              2) include the modalpanel in the page (outside of the form)
              3) open the modalpanel on an oncomplete of a a4j:commandLink
              The parameters which define which page to load in the modalpanel are all
              passed through serverside bean members.
              Note also the reRender on the a4J;commandLink

              The code below:

              1) ModalPanel in a separate facelet

              <?xml version="1.0" encoding="UTF-8"?>
              <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
               xmlns="http://www.w3.org/1999/xhtml"
               xmlns:jsp="http://java.sun.com/JSP/Page"
               xmlns:f="http://java.sun.com/jsf/core"
               xmlns:h="http://java.sun.com/jsf/html"
               xmlns:c="http://java.sun.com/jstl/core"
               xmlns:a4j="http://richfaces.org/a4j"
               xmlns:rich="http://richfaces.org/rich"
               xmlns:s="http://jboss.com/products/seam/taglib">
               <!--
               Note opacity set to 0 in css because other values result in slow firefox performance:
               http://jboss.com/index.html?module=bb&op=viewtopic&t=122333
               -->
               <rich:modalPanel id="SearchPanel" resizeable="true" moveable="true"
               height="500" top="20" left="112" width="750"
               showWhenRendered="#{formBean.showSearchPanel}">
               <f:facet name="header">
               <h:outputText id="SearchPanelTitle" value="#{title}" />
               </f:facet>
               <f:facet name="controls">
               <h:outputLink id="closeLink">
               <h:graphicImage value="/gfx/close.png" />
               <a4j:support event="onclick"
               oncomplete="Richfaces.hideModalPanel('SearchPanel')">
               <a4j:actionparam name="uri" value=""
               assignTo="#{formBean.searchPanelURI}" />
               <a4j:actionparam name="showSearchPanel" value="#{false}"
               assignTo="#{formBean.showSearchPanel}" />
               </a4j:support>
               </h:outputLink>
               </f:facet>
              
               <h:panelGroup id="SearchPanelGroup">
               <a4j:outputPanel rendered="#{formBean.showSearchPanel}">
               <a4j:include viewId="#{uri}" id="SearchPanelInclude">
               <a4j:actionparam name="fromBean" value="#{fromBean}" />
               <a4j:actionparam name="fromControl" value="#{fromControl}" />
               <a4j:actionparam name="fromFeature" value="#{fromFeature}" />
               </a4j:include>
               </a4j:outputPanel>
               </h:panelGroup>
               </rich:modalPanel>
              </ui:composition>


              2) include the modalpanel in the page
              <a4j:outputPanel id="MainSearchPanel">
              
               <ui:include src="/templates/facelets/SearchPanel.xhtml">
               <ui:param name="uri" value="#{formBean.searchPanelURI}"/>
               <ui:param name="title" value="#{formBean.searchPanelTitle}"/>
               <ui:param name="fromControl" value="#{formBean.fromControl}"/>
               <ui:param name="currentView" value="/pages/library/BookEdit.xhtml"/>
               <ui:param name="fromFeature" value="#{formBean.searchPanelFeature}"/>
               <ui:param name="fromBean" value="#{formBean}"/>
               </ui:include>
              
               </a4j:outputPanel>
              


              3) open the modalpanel on an oncomplete of the commandLink

              <a4j:commandLink id="bookAuthorSearchLink" limitToList="true" ajaxSingle="true" title="#{messages['Writer.form.titleSearch']}"
               reRender="SearchPanelGroup,SearchPanelTitle" oncomplete="Richfaces.showModalPanel('SearchPanel');">
               <h:graphicImage value="/gfx/search.gif"/>
               <a4j:actionparam name="fromControl" value="bookAuthorDecoration"
               assignTo="#{formBean.fromControl}"/>
               <a4j:actionparam name="uri" value="/pages/library/WriterSelect.xhtml"
               assignTo="#{formBean.searchPanelURI}"/>
               <a4j:actionparam name="title" value="#{messages['Writer.form.titleSearch']}"
               assignTo="#{formBean.searchPanelTitle}"/>
               <a4j:actionparam name="showSearchPanel" value="#{true}"
               assignTo="#{formBean.showSearchPanel}"/>
               <a4j:actionparam name="feature" value="author"
               assignTo="#{formBean.searchPanelFeature}"/>
               <a4j:actionparam name="entityName" value="Writer"
               assignTo="#{entityList.entityName}"/>
               <a4j:actionparam name="maxResults" value="15"
               assignTo="#{entityList.maxResults}"/>
               </a4j:commandLink>