ModalPanel in a dropdown| JBoss.org Content Archive (Read Only)

1. Re: ModalPanel in a dropdown

sgthawk Jul 13, 2007 9:31 PM (in response to sgthawk)

Its not necessarily to have form around the modal like i couldn't, you have to make your ajax:support just ajaxSingle=true!

2. Re: ModalPanel in a dropdown

sergeysmirnov Jul 13, 2007 10:17 PM (in response to sgthawk)

Two rules are important for modal panel:
1. Modal panel must have its own form if it has form elements (input or/and command components) inside
2. Modal panel must not be included into the form (on any level up) if it has the form inside.

In general, any Ajax request in Ajax4jsf made based of form submission. So, having form is mandatory. The value of ajaxSingle attribute does not change this rule.

3. Re: ModalPanel in a dropdown

sgthawk Jul 14, 2007 6:21 AM (in response to sgthawk)

But my modalpanel has not its own form!Look:

<f:view>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Status Center</title>
 </head>
 <body onload="draginit()">
 <a4j:loadScript src="/js/dragndrop.js" />
 <h:form>
 <rich:toolBar itemSeparator="line">
 <h:outputLink
 value="javascript:Richfaces.showModalPanel('testPanel')">
 <h:outputText value="Konfig" />
 </h:outputLink>
 <rich:modalPanel height="200" width="400" id="testPanel" resizeable="false">
 <f:facet name="header">
 <h:outputText value="Konfig-View" />
 </f:facet>
 <f:facet name="controls">
 <h:outputLink
 value="javascript:Richfaces.hideModalPanel('testPanel')">
 <h:outputText value="X" style="hand:cursor" />
 </h:outputLink>
 </f:facet>
 <h:panelGrid columns="3">
 <h:outputText value="Anlage:" styleClass="componentValue" />
 <h:outputText value="Komponente:" styleClass="componentValue" />
 <h:outputText value="Wert:" styleClass="componentValue" />
 <h:selectOneListbox value="#{plant.selectedPlant}">
 <f:selectItems value="#{plant.plants}" />
 <a4j:support event="onchange" ajaxSingle="true" reRender="test1" actionListener="#{plant.changeValuePlant}" />
 </h:selectOneListbox>
 <h:selectOneMenu id="test1" value="#{plant.selectedComponent}"
 binding="#{plant.menu}">
 <f:selectItems value="#{plant.components}" />
 <a4j:support event="onchange" ajaxSingle="true" actionListener="#{plant.changeValueComponent}" />
 </h:selectOneMenu>
 <h:selectOneRadio border="1" immediate="true"
 layout="pageDirection" converter="valueType" value="#{value.selectedValue}">
 <f:selectItems value="#{value.values}" />
 <a4j:support ajaxSingle="true" event="onclick" actionListener="#{value.changeValueType}" />
 </h:selectOneRadio>
 </h:panelGrid>
 <h:messages />
 <a4j:commandButton value="Ausführen" ajaxSingle="true"
 actionListener="#{value.processAction}" styleClass="configButton" oncomplete="javascript:Richfaces.hideModalPanel('testPanel')" />
 </rich:modalPanel>
 <h:commandLink action="#{login.doLogout}">
 <h:outputText value="Logout" />
 </h:commandLink>
 </rich:toolBar>
 </h:form>

4. Re: ModalPanel in a dropdown

sergeysmirnov Jul 14, 2007 12:50 PM (in response to sgthawk)

so, you broke the rule #1. Your modal model must have the own form. Add it and then move your modal panel to the bottom of the page right after outside form is closed.

5. Re: ModalPanel in a dropdown

sgthawk Jul 14, 2007 6:52 PM (in response to sgthawk)

ok,you are of course, but it really worked both in FF and IE.Bur now i did it your way :-)I was mistaken because i didn't know that you could put the modal somewhere else.

<f:view>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Status Center</title>
 </head>
 <body onload="draginit()">
 <a4j:loadScript src="/js/dragndrop.js" />
 <h:form>
 <rich:toolBar itemSeparator="none">
 <rich:dropDownMenu value="Aktion">
 <rich:menuItem submitMode="none">
 <h:outputText value="Echtzeit" />
 </rich:menuItem>
 <rich:menuItem submitMode="none">
 <h:outputLink
 value="javascript:Richfaces.showModalPanel('testPanel')">
 <h:outputText value="Konfig" />
 </h:outputLink>
 </rich:menuItem>
 </rich:dropDownMenu>
 <h:commandLink action="#{login.doLogout}">
 <h:outputText value="Logout" />
 </h:commandLink>
 </rich:toolBar>
 </h:form>
 <a4j:include viewId="/pages/edit.jspx"/>

edit.jspx:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.ajax4jsf.org/rich"
 xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
 <jsp:output doctype-root-element="html"
 doctype-public="-//W3C//DTD XHTML 1.1//EN"
 doctype-system="http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd" />
 <jsp:directive.page contentType="text/html;charset=utf-8" />
 <rich:modalPanel height="200" width="400" id="testPanel"
 resizeable="false">
 <h:form id="modalPanel">
 <f:facet name="header">
 <h:outputText value="Konfig-View" />
 </f:facet>
 <f:facet name="controls">
 <h:outputLink
 value="javascript:Richfaces.hideModalPanel('testPanel')">
 <h:outputText value="X" style="hand:cursor" />
 </h:outputLink>
 </f:facet>
 <h:panelGrid columns="3">
 <h:outputText value="Anlage:" styleClass="componentValue" />
 <h:outputText value="Komponente:" styleClass="componentValue" />
 <h:outputText value="Wert:" styleClass="componentValue" />
 <h:selectOneListbox value="#{plant.selectedPlant}">
 <f:selectItems value="#{plant.plants}" />
 <a4j:support event="onchange" reRender="test1"
 actionListener="#{plant.changeValuePlant}" />
 </h:selectOneListbox>
 <h:selectOneMenu id="test1" value="#{plant.selectedComponent}"
 binding="#{plant.menu}">
 <f:selectItems value="#{plant.components}" />
 <a4j:support event="onchange"
 actionListener="#{plant.changeValueComponent}" />
 </h:selectOneMenu>
 <h:selectOneRadio border="1" immediate="true" layout="pageDirection"
 converter="valueType" value="#{value.selectedValue}">
 <f:selectItems value="#{value.values}" />
 <a4j:support event="onclick"
 actionListener="#{value.changeValueType}" />
 </h:selectOneRadio>
 </h:panelGrid>
 <h:messages />
 <a4j:commandButton value="Ausführen" ajaxSingle="true"
 actionListener="#{value.processAction}" styleClass="configButton"
 oncomplete="javascript:Richfaces.hideModalPanel('testPanel')" />
 </h:form>
 </rich:modalPanel>
</jsp:root>

6. Re: ModalPanel in a dropdown

palvin Oct 18, 2007 2:50 AM (in response to sgthawk)

I can't show the modalpanel in firefox(2.0.0.7) also but in IE is normal. following is my codes:
==============userlist.xhtml========================
<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">
<h:outputLink value="javascript:Richfaces.showModalPanel('mp')">
<h:outputText value="Open Modal Win" />
</h:outputLink>
<h:form>
<rich:panel id="mySelected">
<h:outputText id="myUserName" value="#{userList.userName}"></h:outputText>
</rich:panel>
<rich:spacer height="30" />
<rich:scrollableDataTable value="#{userList.userLists}" var="myUser"
sortMode="single" id="allUsers" height="400px" rows="20"
width="400px" binding="#{userList.myUserListDataTable}" frozenColCount="1">
<a4j:support event="onRowClick" actionListener="#{userList.myRowSelect}" reRender="mySelected"/>
<rich:column id="userName">
<f:facet name="header">
<h:outputText value="User Name"></h:outputText>
</f:facet>
<h:outputText value="#{myUser.userName}"></h:outputText>
</rich:column>
<rich:column id="userDesc">
<f:facet name="header">
<h:outputText value="User Desc"></h:outputText>
</f:facet>
<h:outputText value="#{myUser.userDesc}"></h:outputText>
</rich:column>
<rich:column id="userEmail">
<f:facet name="header">
<h:outputText value="User Email"></h:outputText>
</f:facet>
<h:outputText value="#{myUser.userEmail}"></h:outputText>
</rich:column>
</rich:scrollableDataTable>
</h:form>
<a4j:include viewId="/pages/test.xhtml" />
</ui:composition>

==================test.xhtml=====================
<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">

function getRightTop(ref) {
var position = new Object();
position.top = 0; //ref.offsetTop;
position.left =0; // ref.offsetLeft+ref.clientWidth+6;
return position;
}

<rich:modalPanel id="mp" minHeight="200" minWidth="450"
height="200" width="500" zindex="2000">
<f:facet name="header">
<h:outputText value="Modal Panel Title" />
</f:facet>
Any JSF content might be inside the panel. In case of using
Facelets or JSF 1.2, it might be any mixed content.

The RichFaces modal panel is good with <a4j:include> to create
a wizard like behavior.
The model panel is open and closed from the javascript function
on Richfaces object. The following code
<a href="javascript:Richfaces.hideModalPanel('mp')">hide this panel:
Richfaces.hideModalPanel('mp')

</rich:modalPanel>

</ui:composition>

==================codes end====================
Could anyone can give me some advise?

7. Re: ModalPanel in a dropdown

ips Feb 11, 2009 1:15 AM (in response to sgthawk)

"SergeySmirnov" wrote:
Two rules are important for modal panel:
1. Modal panel must have its own form if it has form elements (input or/and command components) inside
2. Modal panel must not be included into the form (on any level up) if it has the form inside.

These are very non-intuitive restrictions and not always easy to adhere to. For example, in my case, I have an element that generates a component tree dynamically via a binding attribute; this tree contains, among other things, a modal panel, which contains multiple UIInputs and an HtmlAjaxCommandLink. The element with the binding attribute is enclosed by an h:form element on the xhtml page (there are good reasons for this). Unfortunately, due to this enclosing h:form element, it is not an option for me to add another form element as a child of the modal panel. And pulling the modal panel out of the dynamic component tree will be quite a bit of work and will deviate from my original design.

In the docs for rich:modalPanel {1}, I see the note "In order to avoid a bug in IE, the root node of the dialog is moved on the top of a DOM tree." I assume this is the underlying reason for the limitation that a modal panel must not be part of an enclosing form. Can you describe in more detail what the IE bug is? Wasn't there some way for RichFaces to work around the bug without imposing these restrictions?

Thanks,
Ian

{1} http://jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/modalPanel.html

8. Re: ModalPanel in a dropdown

nbelaevski Feb 11, 2009 8:06 AM (in response to sgthawk)

Hi Ian,

We've added new modal panel attribute in 3.3.0: https://jira.jboss.org/jira/browse/RF-5588. So now you can set

<rich:modalPanel domElementAttachment="form">

and inner form is no more necessary, but you should locate form containing modal panel on the page so that another elements do not cover it (e.g. put just after body element).

9. Re: ModalPanel in a dropdown

ips Feb 11, 2009 1:55 PM (in response to sgthawk)

Thanks, Nick. That worked like a charm.

10. Re: ModalPanel in a dropdown

radhesh May 15, 2009 1:29 PM (in response to sgthawk)

setting domElementAttachment to form works for Firefox and IE 7. But in IE 6, the htmlSelectOneMenu is rendered in a disabled fashion. Is there a workaround for this problem? Can tridentIVEngineSelectBehavior attribute help? If so, what should be the value of this attribute to enable htmlSelectOneMenu?

11. Re: ModalPanel in a dropdown

nbelaevski May 15, 2009 1:38 PM (in response to sgthawk)

Radhesh,

Here is the JIRA issue for the problem: https://jira.jboss.org/jira/browse/RF-7179