6 Replies Latest reply on Apr 7, 2009 4:31 PM by cmathrusse

rich:modalPanel not populating with data in IE7

cmathrusse Apr 3, 2009 5:23 PM

I've defined a rich:modalPanel, following the documentation carefully, and all seems to work well, except that it does not populate with data from my backing bean. I've got the following:

<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"
 template="../layout/layout.xhtml">

 <ui:param name="pageTitle" value="#{msgs.orgsTitle}" />

 <ui:define name="main-frame">
 <h:form>
 <h:panelGrid>

 <rich:dataTable id="orgsTable" binding="#{organization.table}"
 value="#{organization.organizations}"
 var="record"
 onRowMouseOver="this.style.backgroundColor='#F1F1F1';this.style.cursor='pointer';"
 onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
 cellpadding="0" cellspacing="0" border="0" rows="15" reRender="ds"
 style="width: 100%; table-layout: fixed;">
....

 <rich:column>
 <a4j:commandButton value="Edit" oncomplete="#{rich:component('organizationEdit')}.show()"
 reRender="organizationInfo, nameInput, descInput">
 <f:setPropertyActionListener value="#{record}" target="#{organization.selected}" />
 </a4j:commandButton>
 </rich:column>
...
 </rich:dataTable>
 </h:panelGrid>
 </h:form>

 <rich:modalPanel id="organizationEdit">
 <f:facet name="header">
 Organization
 </f:facet>
 <h:form>
 <h:panelGrid id="organizationInfo">
 <h:outputLabel for="nameInput" value="Name:"/>
 <h:inputText id="nameInput" value="#{organization.selected.id}"/>
 <h:outputLabel for="descInput" value="Description:"/>
 <h:inputText id="descInput" value="#{organization.selected.description}"/>
 <h:panelGrid columns="2">
 <a href="#" onclick="#{rich:component('organizationEdit')}.hide();return false">
 Close
 </a>
 <a4j:commandLink oncomplete="#{rich:component('organizationEdit')}.hide();return false">
 Save
 </a4j:commandLink>
 </h:panelGrid>
 </h:panelGrid>
 </h:form>
 </rich:modalPanel>


 </ui:define>
</ui:composition>

My <ui:composition> is part of an overall layout that is defined as follows:

<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:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich" >
 <f:view>
 <h:form>
 <a4j:region id="layoutRegion">
....
 <ui:insert name="main-frame"/>
 </a4j:region>
 </h:form>
 </f:view>
</html

The model opens when I select the edit link in the datatable, but the <h:inputText> fields are not populated with data from the backing bean. I find the backing bean's selected object being set but it appears the selected object is never being retrieved from the modalPanel, even though the link is defined to reRender the input fields.

I've tried this in both IE7 and in Firefox and it appears to work correctly in FireFox as the inputText fields are being populated, but IE7 doesn't see to like it.

Am I using this component correctly? If not, where is my mistake or is this an "Undocumented Feature" of IE? How can I get around this issue?

Thanks for the help...

1. Re: rich:modalPanel not populating with data in IE7

nbelaevski Apr 6, 2009 5:13 AM (in response to cmathrusse)

Hello,

Nested form components are not allowed in JSF. Remove forms nesting and this should work well.
Actions
2. Re: rich:modalPanel not populating with data in IE7

cmathrusse Apr 6, 2009 5:37 PM (in response to cmathrusse)

OK, I guess that make sense to me, but the modalPanel documentation states:

To work properly the <rich:modalPanel> should always be placed outside the original <h:form> and must include its own <h:form> for such cases like performing submissions from within the <rich:modalPanel>.

So wouldn't this mean that I need to place my modalPanel outside of my top level form on my layout? Doesn't that make things a bit difficult when using a ui:composition that is composed of multiple pages?
Actions
3. Re: rich:modalPanel not populating with data in IE7

nbelaevski Apr 6, 2009 6:07 PM (in response to cmathrusse)

Right, by default modal panel have to be outside top level form (of course, if you need inputs or commands inside, output component don't need this!). We've added new attribute in 3.3.0.GA that allows you to get control on this: https://jira.jboss.org/jira/browse/RF-5588.
Actions
4. Re: rich:modalPanel not populating with data in IE7

cmathrusse Apr 7, 2009 2:58 PM (in response to cmathrusse)

Sorry for me being so think headed, but I need a bit more clarification. I understand that nested forms are not supported, but I have designed the UI components to have a parent layout that contained the form that wrapped around everything. This includes pages that were inserted into the layout. Without that global form to encompass all components, wont some components, (<a4j:commandButton>, etc...) not function correctly?

Does this mean that each page that is inserted into the layout should have a <h:form></h:form> within each <ui:composition>? This would not be nested forms but multiple forms. Is this how I should approach this issue, allowing each <ui:composition> to contain its own <h:form>, thus allowing the modalPanel to be defined outside of the form?

Thanks for the help.... (and patience)
Actions
5. Re: rich:modalPanel not populating with data in IE7

tri77ion Apr 7, 2009 3:10 PM (in response to cmathrusse)

Instead of moving the main h:form outside of your template you could define a separate h:form/ui:insert that you can use with a ui:define to hold your modalPanel. This will satisfy the requirement that it's in its own form.
Actions
6. Re: rich:modalPanel not populating with data in IE7

cmathrusse Apr 7, 2009 4:31 PM (in response to cmathrusse)
Got it! I removed my outer most form and allowed each one of the pages:
<ui:composition>
to define the form. This gives each page that might need a modalPanel the ability to define it outside of the form, placing the responsibility on each implementation.

Thanks very much for the help...
Actions

Go to original post