11 Replies Latest reply on Jun 26, 2007 10:01 AM by henrik lindberg

    modalPanel, suggestionBox and a4j:include

    shooali Newbie

      Hello,

      I have been trying to use rich:modalPanel and having some problems:

      1. In the development guide, it is written that it is good to use modalPanel along with a4j:include. Is there any example for it? I tried but it did not work so I have put ui:include instead.

      2. It works for IE but in FF I get a JS exception:

      panel.modalPanel has no properties
      panel.modalPanel.show(opts);}
      .

      3. I have a suggestionBox inside the modalPanel content. when using it, the popup suggestion list does not show since it is behind the modalPanel.

      4. Which richfaces version should I use? 3.0 or 3.0.1 snapshot, to have it all worked?

      5. Is the suggestionBox still works in ajaxSingle=true always in the latest snapshot?

      Attached is the code, thanks.

       <rich:modalPanel id="mp" minHeight="600" minWidth="1000"
       height="600" width="1000" zindex="2000">
       <f:facet name="header">
       <h:outputText value="Add Custom Constraint"/>
       </f:facet>
       <f:facet name="controls">
       <a href="javascript:Richfaces.hideModalPanel('policy_editing_form:mp')">X</a>
       </f:facet>
       <ui:include src="PolicyEditingWizardBodyAddCustomConstraint.xhtml"/>
       <a href="javascript:Richfaces.hideModalPanel('policy_editing_form:mp')">close</a>
       </rich:modalPanel>
      
      *********************************
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html 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="https://ajax4jsf.dev.java.net/ajax"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:t="http://myfaces.apache.org/tomahawk">
      
      
      <body>
      
       <ui:composition>
      <!-- <a4j:log level="ALL" popup="false" width="400" height="200"/>-->
       <c:set var="pageBean" value="#{policyEditingWizardStageAddCustomConstraintBean}"/>
       <t:saveState value="#{policyEditingWizardBean}" rendered="false"/>
       <script language="javascript" >resizeAllLayouts();</script>
       <span id="wizard_popup">
       <a4j:region>
       <table id="wizard_popup_table" cellpadding="0"
       cellspacing="10" border="2" width="100%"
       style="padding-left: 20px;padding-right: 20px;">
       <tr>
       <td>#{ajax_msgs['RULE_CONDITIONS_PAGE.TITLE']}
       <h:selectOneRadio id="constraintKindRadio"
       value="#{pageBean.selectedConstraintKind}"
       layout="pageDirection"
       converter="constraintKindConverter">
       <f:selectItems id="constraintKindItems" value="#{pageBean.constraintKindItems}"/>
       <a4j:support event="onclick" reRender="allPanels"/>
       </h:selectOneRadio>
       </td>
       </tr>
       <tr>
       <td valign="middle">
       <!-- ****************************************************** -->
       <!-- radio buttons above show and hide the following panels. -->
       <!-- ****************************************************** -->
       <h:panelGroup id="allPanels">
      
       <!-- ********** config item attribute ************* -->
       <h:panelGroup
       id="ConfigItemAttributePanel"
       rendered="#{pageBean.configItemAttributeKind}">
       <table align="left" width="100%" height="200" border="3" cellspacing="0">
       <tr valign="top">
       <td width="15%">#{ajax_msgs['RULE_CONDITIONS_PAGE.ATTR_FULL_NAME']}</td>
       <td>
       <h:inputText id="configItemAttributePath"
       value="#{pageBean.ciAttributeBean.path}"
       style="width: 250px">
       <!--
       <a4j:support event="onkeyup" reRender="ciAttributeOperator"
       ignoreDupResponses="true"
       requestDelay="200"
       limitToList="true"/>
       -->
       </h:inputText>
       <rich:suggestionbox
       id="attributePathSuggestBox"
       for="configItemAttributePath"
       var="attributePathSuggestion"
       suggestionAction="#{pageBean.ciAttributeBean.configItemAttributeSuggestions}"
       ignoreDupResponses="true"
       requestDelay="200"
       height="200" width="250">
       <!--
       <a4j:support event="onselect" reRender="ciAttributeOperator"
       ignoreDupResponses="true"
       requestDelay="200"
       limitToList="true"/>
       -->
       <h:column>
       <h:outputText value="#{attributePathSuggestion}"/>
       </h:column>
       </rich:suggestionbox>
       </td>
       </tr>
       <tr valign="top">
       <td>
       <h:outputText id="ciAttributeOperatorLabel"
       value="#{ajax_msgs['RULE_CONDITIONS_PAGE.OPERATOR']}">
       </h:outputText>
       </td>
       <td colspan="2">
       <!-- ********** list box for choosing operator ********* -->
       <h:selectOneMenu id="ciAttributeOperator"
       value="#{pageBean.ciAttributeBean.operator}"
       converter="operatorConverter"
       style="width: 100px">
       <f:selectItems id="ciAttributeOperatorItems"
       value="#{pageBean.ciAttributeBean.operatorOptions}"/>
       </h:selectOneMenu>
       </td>
       </tr>
       <tr valign="top">
       <td>#{ajax_msgs['RULE_CONDITIONS_PAGE.VALUE']}</td>
       <td colspan="2">
       <h:inputText id="ciAttributeValue"
       value="#{pageBean.ciAttributeBean.value}"
       styleClass="emc_text"/>
       </td>
       </tr>
       </table>
       </h:panelGroup>
      
       <!-- ***************** file property ************************ -->
       <h:panelGroup
       id="FilePropertyPanel"
       rendered="#{pageBean.filePropertyKind}">
       <table align="left" width="100%" height="200" border="3" cellspacing="0">
       <tr height="10%" valign="top">
       <td width="15%">#{ajax_msgs['RULE_CONDITIONS_PAGE.CONFIGURATION_FILE']}</td>
       <td>
       <h:inputText id="filePropertyFilePath"
       value="#{pageBean.filePropertyBean.configurationFileName}"/>
       </td>
       </tr>
       <tr valign="top">
       <td width="15%">#{ajax_msgs['RULE_CONDITIONS_PAGE.PROPERTY']}</td>
       <td><h:inputText id="filePropertyName" value="#{pageBean.filePropertyBean.name}"/></td>
       </tr>
       <tr valign="top">
       <td>#{ajax_msgs['RULE_CONDITIONS_PAGE.HINT_ON_PROPERTY']}</td>
       <td>
       <h:selectOneMenu
       id="filePropertyTypeHintOption"
       value="#{pageBean.filePropertyBean.typeHint}"
       style="width:150;" styleClass="selectOneMenu"
       converter="typeHintConverter">
       <a4j:support event="onchange" reRender="filePropertyOperator"/>
       <f:selectItems value="#{pageBean.filePropertyBean.typeHintOptions}" />
       </h:selectOneMenu>
       </td>
       </tr>
       <tr valign="top">
       <td>#{ajax_msgs['RULE_CONDITIONS_PAGE.OPERATOR']}</td>
       <td>
       <!-- ********** list box for choosing operator ********* -->
       <h:selectOneMenu id="filePropertyOperator"
       value="#{pageBean.filePropertyBean.operator}"
       converter="operatorConverter"
       style="width: 100px">
       <f:selectItems id="filePropertyOperatorItems"
       value="#{pageBean.filePropertyBean.operatorOptions}"/>
       </h:selectOneMenu>
       </td>
       </tr>
       <tr valign="top">
       <td>#{ajax_msgs['RULE_CONDITIONS_PAGE.VALUE']}</td>
       <td>
       <h:inputText id="fileOperatorValue" value="#{pageBean.filePropertyBean.value}" />
       </td>
       </tr>
       </table>
      
       <h:messages/>
       </h:panelGroup>
      
       <!-- ***************** config item count ************************** -->
       <h:panelGroup
       id="ConfigItemCountPanel"
       rendered="#{pageBean.configItemCountKind}">
       <table align="left" width="100%" height="200" border="3" cellspacing="0">
       <tr valign="top">
       <td width="15%">#{ajax_msgs['RULE_CONDITIONS_PAGE.PATH_CONFIGURATION_ITEM']}</td>
       <td>
       <h:inputText id="configItemCountPath"
       value="#{pageBean.ciCountBean.path}"
       style="width: 250px">
       <a4j:support event="onkeyup" reRender="ciCountOperator"
       ignoreDupResponses="true"
       requestDelay="200"
       limitToList="true"/>
       </h:inputText>
       <rich:suggestionbox
       id="configItemPathSuggestBox"
       for="configItemCountPath"
       var="configItemPathSuggestion"
       suggestionAction="#{pageBean.ciCountBean.configItemPathSuggestions}"
       ignoreDupResponses="true"
       requestDelay="200"
       height="200" width="250">
       <a4j:support event="onselect" reRender="ciAttributeOperator"
       ignoreDupResponses="true"
       requestDelay="200"
       limitToList="true"/>
       <h:column>
       <h:outputText value="#{configItemPathSuggestion}"/>
       </h:column>
       </rich:suggestionbox>
       </td>
       </tr>
       </table>
       </h:panelGroup>
       </h:panelGroup>
       </td>
       </tr>
      
       <!-- ****************** Buttons ************************ -->
       <tr height="10%" valign="bottom">
       <td align="right">
       <a id="ok_button" jsfc="h:commandButton"
       value="#{ajax_msgs['GENERAL.BUTTON.OK.LABEL']}"
       action="#{pageBean.okAction}">
       </a>
       <a id="cancel_button" jsfc="h:commandButton"
       value="#{ajax_msgs['GENERAL.BUTTON.CANCEL.LABEL']}"
       action="#{pageBean.cancelAction}" immediate="true">
       </a>
       </td>
       </tr>
       </table>
       </a4j:region>
       </span>
      </ui:composition>
      </body>
      </html>
      
      


        • 1. Re: modalPanel, suggestionBox and a4j:include
          shooali Newbie

          forgot to mention that I use the latest snapshot and that I get the same problems with ver 3.0.0.

          thanks,

          • 2. Re: modalPanel, suggestionBox and a4j:include
            Ilya Shaikovsky Master

            1) did you used viewId attribute for a4j:include?

            2) Seems strange in IE no JS errors shown at all?

            3) http://jira.jboss.com/jira/browse/RF-103 thanks for submit :)

            4) 3.0.1 SNAPSHOTS has numerous fixes so - more usable.

            5) yes.

            • 3. Re: modalPanel, suggestionBox and a4j:include
              shooali Newbie

              Thanks for the reply,

              1. yes I did, the content of the opened modalPanel is empty, only when used ui:include I see the content.

              2. did not get any error on IE.

              5. yes for still ajaxSingle only? because I have seen a post here that it was changed for ver 3.0.1? If not, is there a plan to change it soon. I want to reRender another element on the page that depends on the value of the suggestionbox. I tried many things, including what you've suggested, catching the onchange or onclick event on the inputText... nothing really works good.

              I am using ajax4jsf 1.1.0 should I use the latest snapshot for getting the richfaces to work better?

              thanks,

              • 4. Re: modalPanel, suggestionBox and a4j:include
                Arthur Hupka Newbie

                The problem occurs again in Ajax4JSF 1.1.2-SNAPSHOT and Richfaces 3.0.2-SNAPSHOT (latest versions)

                Modal Panel:

                <rich:modalPanel id="mp" minHeight="200" minWidth="450"
                 height="600" width="550" zindex="2000">
                 <f:facet name="header">
                 <h:outputText value="Neue Location anlegen" />
                 </f:facet>
                 <f:facet name="controls">
                 <h:outputText value="X" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
                 </f:facet>
                 <h:form id="locationForm">
                
                <ui:include src="/location/inc/form_inc.xhtml"/>
                <div class="buttonset">
                <a4j:commandButton action="#{myEventForm.persistNewArtist}" reRender="artistForm,chosenArtists" value="Speichern" />
                
                </div>
                </h:form>
                
                </rich:modalPanel>
                


                location/inc/form_inc.xhtml (relevant part)

                ....
                <s:decorate id="locationDeco" template="/inc/inputDec.xhtml">
                 <ui:define name="label">Location</ui:define>
                 <ui:define name="field">
                 <t:inputText id="location" required="true"
                 value="#{eventLocationAjax.valueHolder.name}" size="25">
                 </t:inputText>
                 <rich:suggestionbox for="location" requestDelay="325"
                 suggestionAction="#{eventLocationAjax.suggest}"
                 fetchValue="#{location.name}" var="location">
                 <a4j:support
                 action="#{eventLocationAjax.setObjectAction()}"
                 event="onselect" reRender="cityName" />
                 <h:column>
                 <h:outputText value="#{location.name}" />
                 </h:column>
                 <h:column>
                 <h:outputText value="#{location.address.city.name}" />
                 </h:column>
                 </rich:suggestionbox>
                 <a4j:commandLink onclick="javascript:Richfaces.showModalPanel('mp',{width:500, top:200})" styleClass="linkIntern">
                <h:outputText value="Klick" />
                </a4j:commandLink>
                 </ui:define>
                
                 </s:decorate>
                ...
                


                This thing worked for me for a while, but now the suggestionBox appears again in the darkened background behind the modalPanel.

                Should i reopen the issue?

                • 5. Re: modalPanel, suggestionBox and a4j:include
                  Ilya Shaikovsky Master

                  Checked on the release version and on the 3.0.2 SNAPSHOTS

                  <ui:define name="body">
                   <a href="javascript:Richfaces.showModalPanel('panel',{left:'auto', top:'auto'})">Show</a>
                   <rich:modalPanel id="panel">
                   <h:form>
                   <h:inputText value="#{bean.property}" id="test" size="50" required="true">
                   </h:inputText>
                   <rich:suggestionbox width="200" height="200" for="test"
                   suggestionAction="#{bean.autocomplete}" var="cap" ajaxSingle="false" limitToList="false" reRender="panel1">
                   <h:column>
                   <h:outputText value="#{cap.text}"></h:outputText>
                   </h:column>
                   </rich:suggestionbox>
                   <a4j:log></a4j:log>
                   </h:form>
                   </rich:modalPanel>
                   </ui:define>


                  Works as expected. Popup is above the window.

                  • 6. Re: modalPanel, suggestionBox and a4j:include
                    henrik lindberg Apprentice

                    Hi, I am using the latest (June 19) 3.0.2 SNAPSHOT and I still have problems. The suggestionbox appears in the upper left corner and is subdued, the choices are also shown in the panel where the field is, but a bit further down (inserted as text).
                    Clicking on a selection in the suggestionbox makes it go away, and it does not reappear when typing.

                    Was the fix in the June 19 SNAPSHOT?

                    • 7. Re: modalPanel, suggestionBox and a4j:include
                      henrik lindberg Apprentice

                      Should I try some other snapshot?

                      • 8. Re: modalPanel, suggestionBox and a4j:include
                        Ilya Shaikovsky Master

                        I'm using richfaces-3.0.2-20070620.002147-16 and still can't reproduce under FF IE and Opera where I've tested with the code I've pasted.

                        • 9. Re: modalPanel, suggestionBox and a4j:include
                          henrik lindberg Apprentice

                          That is the version I am using, and I have problems.
                          What can I send you?

                          • 10. Re: modalPanel, suggestionBox and a4j:include
                            Ilya Shaikovsky Master

                            I've reopened the bug. please attach the war with your example for investigations.

                            • 11. Re: modalPanel, suggestionBox and a4j:include
                              henrik lindberg Apprentice

                              ok, thanks - I will need to isolate the thing that breaks - can't send the entire war file - would not be runnable.