11 Replies Latest reply on May 15, 2009 1:38 PM by Nick Belaevski

    ModalPanel in a dropdown

    Behzad Daghigh Newbie

      That is impossible because, you needed an nested form in the modalpanel...
      Is there any other solution?

        • 1. Re: ModalPanel in a dropdown
          Behzad Daghigh Newbie

          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
            Sergey Smirnov Master

            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
              Behzad Daghigh Newbie

              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
                Sergey Smirnov Master

                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
                  Behzad Daghigh Newbie

                  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 Zhu Newbie

                    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
                      Ian Springer Master

                       

                      "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
                        Nick Belaevski Master

                        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
                          Ian Springer Master

                          Thanks, Nick. That worked like a charm.

                          • 10. Re: ModalPanel in a dropdown
                            Radhesh Radhakrishnan Newbie

                            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
                              Nick Belaevski Master

                              Radhesh,

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