Two ModalPanel's (distinct IDs), one called, both show up
shino Apr 14, 2009 4:16 AMHi 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