Problem by rich:modalPanel with facelets

[darmstadter]

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>

[darmstadter]

the same problem with version 3.2.0-SNAPSHOT

[gkuzmin]

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.

[ilya_shaikovsky]

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.

[darmstadter]

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.