2 Replies Latest reply on Apr 14, 2009 10:06 AM by Christoph Sauer

    Two ModalPanel's (distinct IDs), one called, both show up

    Christoph Sauer Newbie

      Hi there, I hope everyone had a relaxing weekend and is now eager to give poor souls like me some support in resolving our self-woven richfaces-mysteries ;-)

      As stated in the headline, my problem is that two ModalPanels show up, when only one is triggered.
      Actually it is like this:
      My application is an addressbook.
      I have a commandButton which opens up a form for adding a new address, the form is displayed in a modalPanel.
      I also want to be able to edit table entries by double-clicking on them. I'm using an a4j:support to achieve this.
      Both ModalPanels are being included via ui:include outside of the form needed for the dataTable.

      On its own, the commandButton works, the same goes for the a4j:support. But as soon as both are in the code, the commandButton (which is defined a bit after the a4j:support tag) doesn't work anymore.
      Things become really odd, when double-clicking on a row brings up both modalpanels, looking like a single, big one instead of two.

      I'm sure I must have missed something on how modalPanels should be defined.. but at the moment I'm puzzled.. both have unique IDs to call them, both have a form inside and are being included outside of any other form.. here's the code:

      view.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">
      
       <f:loadBundle basename="messages" var="msgs"/>
       <rich:panel header="#{msgs.addressOverviewTitle}" style="height : auto; width : auto;">
       <rich:spacer height="6"></rich:spacer>
       <h:form>
       <rich:dataTable value="#{addressTableBacking.addressesTableData}"
       binding="#{addressTableBacking.addressesTable}"
       sortMode="single"
       id="addressesTable"
       var="address"
       columns="9"
       rows="#{preferencesModel.maxTableEntries}"
       reRender="addressTableDS"
       headerClass="addressesTableHeader"
       rowClasses="oddRow,evenRow">
       <a4j:support
       id="editAddressSupport"
       event="onRowDblClick"
       action="#{addressFormBacking.useCurrentRow}"
       oncomplete="#{rich:component('editAddressMP')}.show();"
       reRender="editAddressForm"/>
      
       <rich:column sortBy="#{address.reference}"
       sortOrder="#{addressesModel.addressesSortOrders[0]}">
       <f:facet name="header">
       <h:outputText value="#{msgs.referenceLabel}" />
       </f:facet>
       <h:outputText value="#{address.reference}" />
       </rich:column>
       <rich:column sortBy="#{address.name}"
       sortOrder="#{addressesModel.addressesSortOrders[1]}">
       <f:facet name="header">
       <h:outputText value="#{msgs.nameLabel}" />
       </f:facet>
       <h:outputText value="#{address.name}" />
       </rich:column>
       <rich:column sortBy="#{address.nameExtension}"
       sortOrder="#{addressesModel.addressesSortOrders[2]}">
       <f:facet name="header">
       <h:outputText value="#{msgs.nameExtLabel}" />
       </f:facet>
       <h:outputText value="#{address.nameExtension}" />
       </rich:column>
       <rich:column sortBy="#{address.street}"
       sortOrder="#{addressesModel.addressesSortOrders[3]}">
       <f:facet name="header">
       <h:outputText value="#{msgs.streetLabel}" />
       </f:facet>
       <h:outputText value="#{address.street}" />
       </rich:column>
       <rich:column sortBy="#{address.houseNo}"
       sortOrder="#{addressesModel.addressesSortOrders[4]}">
       <f:facet name="header">
       <h:outputText value="#{msgs.houseNoLabel}" />
       </f:facet>
       <h:outputText value="#{address.houseNo}" />
       </rich:column>
       <rich:column sortBy="#{address.postalCode}"
       sortOrder="#{addressesModel.addressesSortOrders[5]}">
       <f:facet name="header">
       <h:outputText value="#{msgs.postalCodeLabel}" />
       </f:facet>
       <h:outputText value="#{address.postalCode}" />
       </rich:column>
       <rich:column sortBy="#{address.city}"
       sortOrder="#{addressesModel.addressesSortOrders[6]}">
       <f:facet name="header">
       <h:outputText value="#{msgs.cityLabel}" />
       </f:facet>
       <h:outputText value="#{address.city}" />
       </rich:column>
       <rich:column sortBy="#{address.country}"
       sortOrder="#{addressesModel.addressesSortOrders[7]}">
       <f:facet name="header">
       <h:outputText value="#{msgs.countryLabel}" />
       </f:facet>
       <h:outputText value="#{address.country}" />
       </rich:column>
       <f:facet name="footer">
       <rich:datascroller id="addressTableDS" maxPages="10" />
       </f:facet>
       </rich:dataTable>
       <p><a4j:commandButton id="newAddressButton" value="#{msgs.addNewAddress}"
       oncomplete="#{rich:component('newAddressMP')}.show()" type="button" reRender="newAddressMP"/>
       </p>
       </h:form>
       </rich:panel>
      
       <ui:include src="newAddressForm.xhtml" />
       <ui:include src="editAddressForm.xhtml" />
      </ui:composition>


      newAddressForm.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">
      
       <rich:modalPanel id="newAddressMP" style="width:auto; height:auto;" autosized="true" binding="#{addressFormBacking.addressFormMP}">
      
       <script type="text/javascript">
      
       function closeIfNoErrors(hasMessages){
       if (hasMessages==false){
       Richfaces.hideModalPanel('newAddressMP');
       }
       }
       </script>
      
       <f:facet name="header">
       <h:outputText value="#{msgs.addNewAddress}" />
       </f:facet>
       <f:facet name="controls">
       <h:graphicImage value="/images/modal/close.png"
       id="hidelink" onclick="Richfaces.hideModalPanel('newAddressMP').hide()" />
       </f:facet>
       <a4j:form id="newAddressForm">
       <fieldset style="background:#E0E0F8;">
       <legend><h:outputText value="#{msgs.pleaseEnterAddressData}" /></legend>
       <h:panelGrid id="newAddressPanel" columns="3" width="auto" columnClasses="newAddressFormColumn">
      
       <h:outputLabel for="reference" value="#{msgs.referenceLabel}*" />
       <h:inputText id="reference" value="#{addressFormBacking.address.reference}" required="true" requiredMessage="#{msgs.pleaseEnterReferenceName}"/>
       <rich:message for="reference">
       <f:facet name="errorMarker">
       <h:graphicImage url="/images/validation/error.png"/>
       </f:facet>
       </rich:message>
      
       <h:outputLabel for="name" value="#{msgs.nameLabel}*" />
       <h:inputText id="name" value="#{addressFormBacking.address.name}" required="true" requiredMessage="#{msgs.pleaseEnterAddressName}"/>
       <rich:message for="name">
       <f:facet name="errorMarker">
       <h:graphicImage url="/images/validation/error.png"/>
       </f:facet>
       </rich:message>
      
       <h:outputLabel for="nameExtension" value="#{msgs.nameExtLabel}" />
       <h:inputText id="nameExtension" value="#{addressFormBacking.address.nameExtension}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="street" value="#{msgs.streetLabel}" />
       <h:inputText id="street" value="#{addressFormBacking.address.street}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="houseNo" value="#{msgs.houseNoLabel}" />
       <h:inputText id="houseNo" value="#{addressFormBacking.address.houseNo}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="postalCode" value="#{msgs.postalCodeLabel}" />
       <h:inputText id="postalCode" value="#{addressFormBacking.address.postalCode}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="city" value="#{msgs.cityLabel}" />
       <h:inputText id="city" value="#{addressFormBacking.address.city}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="country" value="#{msgs.countryLabel}" />
       <h:inputText id="country" value="#{addressFormBacking.address.country}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <rich:spacer height="6"></rich:spacer>
       <rich:spacer height="6"></rich:spacer>
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="nonPublicSelect" value="#{msgs.nonPublicLabel}" />
       <h:selectBooleanCheckbox id="nonPublicSelect" value="#{addressFormBacking.address.nonpublic}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="adSelect" value="#{msgs.adLabel}" />
       <h:selectBooleanCheckbox id="adSelect" value="#{addressFormBacking.address.ad}" />
       <rich:spacer height="6"></rich:spacer>
      
       </h:panelGrid>
       </fieldset>
       <fieldset style="background:#E0E0F8;">
       <legend><h:outputText value="#{msgs.pleaseEnterContactData}" /></legend>
       <h:panelGrid id="newContactPanel" columns="3" width="100%" columnClasses="newAddressFormColumn">
       <h:outputLabel for="contactPerson" value="#{msgs.contactPersonLabel}*" />
       <h:inputText id="contactPerson" value="#{addressFormBacking.contact.contactPerson}" required="true" requiredMessage="#{msgs.pleaseEnterContactName}"/>
       <rich:message for="contactPerson">
       <f:facet name="errorMarker">
       <h:graphicImage url="/images/validation/error.png"/>
       </f:facet>
       </rich:message>
      
       <h:outputLabel for="phone" value="#{msgs.phoneLabel}" />
       <h:inputText id="phone" value="#{addressFormBacking.contact.phone}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="mobile" value="#{msgs.mobileLabel}" />
       <h:inputText id="mobile" value="#{addressFormBacking.contact.mobile}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="fax" value="#{msgs.faxLabel}" />
       <h:inputText id="fax" value="#{addressFormBacking.contact.fax}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="email" value="#{msgs.emailLabel}" />
       <h:inputText id="email" value="#{addressFormBacking.contact.email}" >
       <f:validator validatorId="emailValidator"/>
       </h:inputText>
       <rich:message for="email" >
       <f:facet name="errorMarker">
       <h:graphicImage url="/images/validation/error.png"/>
       </f:facet>
       </rich:message>
      
       </h:panelGrid>
       </fieldset>
       <rich:spacer height="6"></rich:spacer>
       <a4j:commandButton value="#{msgs.saveNewAddress}" action="#{addressesModel.addNewAddress}"
       oncomplete="closeIfNoErrors(#{addressFormBacking.hasMessages});"/>
       </a4j:form>
       </rich:modalPanel>
      </ui:composition>


      editAddressForm.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">
      
       <rich:modalPanel id="editAddressMP" style="width:auto; height:auto;" autosized="true" binding="#{addressFormBacking.addressFormMP}">
      
       <script type="text/javascript">
      
       function closeIfNoErrors(hasMessages){
       if (hasMessages==false){
       Richfaces.hideModalPanel('editAddressMP');
       }
       }
       </script>
      
       <f:facet name="header">
       <h:outputText value="#{msgs.addNewAddress}" />
       </f:facet>
       <f:facet name="controls">
       <h:graphicImage value="/images/modal/close.png"
       id="hidelink" onclick="Richfaces.hideModalPanel('editAddressMP').hide()" />
       </f:facet>
       <a4j:form id="editAddressForm">
       <fieldset style="background:#E0E0F8;">
       <legend><h:outputText value="#{msgs.pleaseEnterAddressData}" /></legend>
       <h:panelGrid id="editAddressPanel" columns="3" width="auto" columnClasses="newAddressFormColumn">
      
       <h:outputLabel for="reference" value="#{msgs.referenceLabel}*" />
       <h:inputText id="reference" value="#{addressFormBacking.address.reference}" required="true" requiredMessage="#{msgs.pleaseEnterReferenceName}"/>
       <rich:message for="reference">
       <f:facet name="errorMarker">
       <h:graphicImage url="/images/validation/error.png"/>
       </f:facet>
       </rich:message>
      
       <h:outputLabel for="name" value="#{msgs.nameLabel}*" />
       <h:inputText id="name" value="#{addressFormBacking.address.name}" required="true" requiredMessage="#{msgs.pleaseEnterAddressName}"/>
       <rich:message for="name">
       <f:facet name="errorMarker">
       <h:graphicImage url="/images/validation/error.png"/>
       </f:facet>
       </rich:message>
      
       <h:outputLabel for="nameExtension" value="#{msgs.nameExtLabel}" />
       <h:inputText id="nameExtension" value="#{addressFormBacking.address.nameExtension}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="street" value="#{msgs.streetLabel}" />
       <h:inputText id="street" value="#{addressFormBacking.address.street}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="houseNo" value="#{msgs.houseNoLabel}" />
       <h:inputText id="houseNo" value="#{addressFormBacking.address.houseNo}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="postalCode" value="#{msgs.postalCodeLabel}" />
       <h:inputText id="postalCode" value="#{addressFormBacking.address.postalCode}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="city" value="#{msgs.cityLabel}" />
       <h:inputText id="city" value="#{addressFormBacking.address.city}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="country" value="#{msgs.countryLabel}" />
       <h:inputText id="country" value="#{addressFormBacking.address.country}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <rich:spacer height="6"></rich:spacer>
       <rich:spacer height="6"></rich:spacer>
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="nonPublicSelect" value="#{msgs.nonPublicLabel}" />
       <h:selectBooleanCheckbox id="nonPublicSelect" value="#{addressFormBacking.address.nonpublic}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="adSelect" value="#{msgs.adLabel}" />
       <h:selectBooleanCheckbox id="adSelect" value="#{addressFormBacking.address.ad}" />
       <rich:spacer height="6"></rich:spacer>
      
       </h:panelGrid>
       </fieldset>
       <fieldset style="background:#E0E0F8;">
       <legend><h:outputText value="#{msgs.pleaseEnterContactData}" /></legend>
       <h:panelGrid id="editContactPanel" columns="3" width="100%" columnClasses="newAddressFormColumn">
       <h:outputLabel for="contactPerson" value="#{msgs.contactPersonLabel}*" />
       <h:inputText id="contactPerson" value="#{addressFormBacking.contact.contactPerson}" required="true" requiredMessage="#{msgs.pleaseEnterContactName}"/>
       <rich:message for="contactPerson">
       <f:facet name="errorMarker">
       <h:graphicImage url="/images/validation/error.png"/>
       </f:facet>
       </rich:message>
      
       <h:outputLabel for="phone" value="#{msgs.phoneLabel}" />
       <h:inputText id="phone" value="#{addressFormBacking.contact.phone}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="mobile" value="#{msgs.mobileLabel}" />
       <h:inputText id="mobile" value="#{addressFormBacking.contact.mobile}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="fax" value="#{msgs.faxLabel}" />
       <h:inputText id="fax" value="#{addressFormBacking.contact.fax}" />
       <rich:spacer height="6"></rich:spacer>
      
      
       <h:outputLabel for="email" value="#{msgs.emailLabel}" />
       <h:inputText id="email" value="#{addressFormBacking.contact.email}" >
       <f:validator validatorId="emailValidator"/>
       </h:inputText>
       <rich:message for="email" >
       <f:facet name="errorMarker">
       <h:graphicImage url="/images/validation/error.png"/>
       </f:facet>
       </rich:message>
      
       </h:panelGrid>
       </fieldset>
       <rich:spacer height="6"></rich:spacer>
       <a4j:commandButton value="#{msgs.saveNewAddress}" action="#{addressesModel.updateAddress}"
       oncomplete="closeIfNoErrors(#{addressFormBacking.hasMessages});"/>
       </a4j:form>
       </rich:modalPanel>
       </ui:composition>


      I'd be grateful for any help on this :-)

      best regards

      chris

        • 1. Re: Two ModalPanel's (distinct IDs), one called, both show u
          Ilya Shaikovsky Master

          how about your bindings? should be request scoped.

          also please check a4j:log.

          • 2. Re: Two ModalPanel's (distinct IDs), one called, both show u
            Christoph Sauer Newbie

            hmm the 'addressFormBacking'-backing bean is request scoped (as are all other backing beans), so the scope itself shouldn't be the problem, but maybe this is the right trace.. I was hoping to be able to use just one backingBean for the two forms since they are essentially the same form (the only difference in the function that is called with the submit button) and can't be called at the same time.. or so I thought ;-) I will try changing that....

            ok, it is working now.
            I defined another backingBean in my faces-config, now I have one for each form, editAddressFormBacking and newAddressFormBacking.
            I got one more error stating that the id "hidelink" was defined twice.. well it was defined twice but in different modalPanels, so I expected it to be a 'local' definition that wouldn't conflict with anything. After resolving that error everything worked as expected.

            I still don't know why exactly the two modalPanels would show up at the same time but I can live with that.

            thanks for pointing me to the right direction :-)