4 Replies Latest reply on Feb 18, 2008 7:42 AM by Dongyao Zhao

    Problem by rich:modalPanel with facelets

    Dongyao Zhao Novice

      Configuration: richfaces 3.1.3-GA, jsf-facelets 1.1.12
      Problem: The modalPanel is in the Tree.xhtml. When you click the node of the tree, modalPanel shows with information of the node. It works well. But
      i want to dividing the file into two files with facelets. i put the modalPanel in a special file named PropertiesModalPanel.xhtml, the modalPanel can not be rerendered. Thanks a lots for your answers.

      
      <ui:composition 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="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich">
       <rich:modalPanel id="detailsMp" width="400" height="420" zindex="2000">
       <f:facet name="header">
       Details
       </f:facet>
       <f:facet name="controls">
       <a href="#" onclick="Richfaces.hideModalPanel('detailsMp')">X</a>
       </f:facet>
       <a4j:outputPanel id="modalContent" layout="inline">
       <h:panelGrid columns="2">
       <h:outputText value="First Name:"/>
       <h:outputText value="#{ctrl.selectedDevicePhysName}"/>
       </h:panelGrid>
       <a href="#" onclick="Richfaces.hideModalPanel('detailsMp')">Close</a>
       </a4j:outputPanel>
       </rich:modalPanel>
       <rich:tree id="TreeNav_Tree1" value="#{ctrl.treeNavData}" var="item" nodeFace="#{item.type}"
       switchType="ajax" binding="#{ctrl.treeNavBinding}">
      
       <rich:treeNode id="TreeNav_TreeNode1" type="ZoneNode" selectedClass="UnvisibleBox">
       <h:outputText value="#{item.name}" id="text"/>
       </rich:treeNode>
      
       <rich:treeNode id="TreeNav_TreeNode2" type="DeviceNode" iconLeaf="#{item.iconPath}"
       icon="#{item.iconPath}" selectedClass="UnvisibleBox" >
      
       <a4j:commandLink value="" reRender="detailsMp,modalContent,panelbar"
       actionListener="#{ctrl.deviceSelected}"
       oncomplete="Richfaces.showModalPanel('detailsMp')">
       <f:param name="devicePhysName" value="#{item.dataItem.physName}" />
       <h:outputText id="DeviceName" value="#{item.name}"/>
       </a4j:commandLink>
      </rich:treeNode>
       </rich:tree>
      </ui:composition>
      
      
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
       xmlns:ui="http://java.sun.com/jsf/facelets">
      
       <rich:modalPanel id="detailsMp" width="400" height="420" zindex="2000">
       <f:facet name="header">
       Details
       </f:facet>
       <f:facet name="controls">
       <a href="#" onclick="Richfaces.hideModalPanel('detailsMp')">X</a>
       </f:facet>
       <a4j:outputPanel id="modalContent" layout="inline">
       <h:panelGrid columns="2">
       <h:outputText value="Device Name:"/>
       <h:outputText value="#{ctrl.selectedDevicePhysName}"/>
       </h:panelGrid>
       <a href="#" onclick="Richfaces.hideModalPanel('detailsMp')">Close</a>
       </a4j:outputPanel>
       </rich:modalPanel>
      
       </ui:composition>
      
      
      


        • 1. Re: Problem by rich:modalPanel with facelets
          Dongyao Zhao Novice

          the same problem with version 3.2.0-SNAPSHOT

          • 2. Re: Problem by rich:modalPanel with facelets
            Gennadiy Kuzmin Newbie

            I had a Problem between Ajax requests and ui:include.
            After Ajax request the text was not in the page. It seems the same problem. I found no decision.

            • 3. Re: Problem by rich:modalPanel with facelets
              Ilya Shaikovsky Master

              I've slightly modified demosite sample(for scrollable dataTAble component) and the main page:

              <h:form>
               <rich:spacer height="30" />
               <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px"
               width="700px" id="carList" rows="40" columnClasses="col"
               value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"
               selection="#{dataTableScrollerBean.selection}">
               <rich:column id="make">
               <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /></f:facet>
               <a4j:outputPanel>
               <rich:dragSupport dragType="selectionDrag" dragIndicator=":indicator"/>
               <h:outputText value="#{category.make}" />
               </a4j:outputPanel>
               </rich:column>
               <rich:column id="model">
               <f:facet name="header"><h:outputText styleClass="headerText" value="Model" /></f:facet>
               <h:outputText value="#{category.model}" />
               </rich:column>
               <rich:column id="price">
               <f:facet name="header"><h:outputText styleClass="headerText" value="Price" /></f:facet>
               <h:outputText value="#{category.price}" />
               </rich:column>
               <rich:column id="mileage">
               <f:facet name="header"><h:outputText styleClass="headerText" value="Mileage" /></f:facet>
               <h:outputText value="#{category.mileage}" />
               </rich:column>
               <rich:column width="200px" id="vin">
               <f:facet name="header"><h:outputText styleClass="headerText" value="VIN" /></f:facet>
               <h:outputText value="#{category.vin}" />
               </rich:column>
               <rich:column id="stock">
               <f:facet name="header"><h:outputText styleClass="headerText" value="Stock" /></f:facet>
               <h:outputText value="#{category.stock}" />
               </rich:column>
               </rich:scrollableDataTable>
               <rich:spacer height="20px"/>
              
               <ui:include src="/richfaces/scrollableDataTable/examples/mp.xhtml"/>
               <a4j:commandButton value="Show Current Selection" reRender="table"
               action="#{dataTableScrollerBean.takeSelection}"
               oncomplete="javascript:Richfaces.showModalPanel('panel');"/>
               </h:form>
              


              included page:
              <ui:composition 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="http://richfaces.org/a4j"
               xmlns:rich="http://richfaces.org/rich">
               <rich:modalPanel id="panel" autosized="true">
               <f:facet name="header">
               <h:outputText value="Selected Rows"/>
               </f:facet>
               <f:facet name="controls">
               <span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>
               </f:facet>
               <rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table">
               <rich:column>
               <f:facet name="header"><h:outputText value="Make" /></f:facet>
               <h:outputText value="#{sel.make}" />
               </rich:column>
               <rich:column id="model">
               <f:facet name="header"><h:outputText value="Model" /></f:facet>
               <h:outputText value="#{sel.model}" />
               </rich:column>
               <rich:column id="price">
               <f:facet name="header"><h:outputText value="Price" /></f:facet>
               <h:outputText value="#{sel.price}" />
               </rich:column>
               <rich:column id="mileage">
               <f:facet name="header"><h:outputText value="Mileage" /></f:facet>
               <h:outputText value="#{sel.mileage}" />
               </rich:column>
               <rich:column id="stock">
               <f:facet name="header"><h:outputText value="Stock" /></f:facet>
               <h:outputText value="#{sel.stock}" />
               </rich:column>
               </rich:dataTable>
               </rich:modalPanel>
              </ui:composition>


              reRender and popup the panel works fine for me.

              • 4. Re: Problem by rich:modalPanel with facelets
                Dongyao Zhao Novice

                thank you for your answer, the problem is solved. because the contextmenu is in a4j:region, but the modal panel is outside the ajax updatable region.