Problem with <rich:modalPanel> and Internet Explorer
max_zel Dec 14, 2009 5:10 AMHi,
I have multiple, very basic pages in my Application.
When I click my "New" Button, the modalPanel shows up, but has no header, no closing icon and - when submitting the panel - the wait component stays visible for ever and a day.
Here's what the problem looks like (in Internet Explorer)
It should look like this (like it does in Firefox):
But only in Internet Explorer 7/8, Firefox works well!
Could somebody please give me a hint? I can't find anything wrong. Since there are no "real" differences between the "Edit" and the "New" Panel.
Many, many thanks in advance - I have been searching for this problem but couldn't find anything...
Here's what my pages source look like:
Each page has a commandbutton:
<rich:panel header="New Customer" style="width: 150px;"> <a4j:commandButton value="New Customer" ajaxSingle="true" id="newbutton" oncomplete="#{rich:component('newPanel')}.show()" /> </rich:panel>
Each page has a Datatable:
<rich:dataTable rows="20" onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" cellpadding="0" cellspacing="0" id="table" rowKeyVar="row" border="0" var="customer" value="#{CustomerBean.customers}"> <f:facet name="header"> <rich:columnGroup> <rich:column colspan="3"> <h:outputText value="Customers" /> </rich:column> <rich:column breakBefore="true" width="400px"> <h:outputText value="Company" /> </rich:column> <rich:column colspan="2"> <h:outputText value="Actions" /> </rich:column> </rich:columnGroup> </f:facet> <rich:column breakBefore="true"> <h:outputText value="#{customer.company}" /> </rich:column> <rich:column styleClass="actionCell"> <a4j:commandLink ajaxSingle="true" id="editlink" oncomplete="#{rich:component('editPanel')}.show()"> <h:graphicImage value="/img/ico/edit.gif" style="border:0" /> <f:setPropertyActionListener value="#{customer}" target="#{CustomerBean.currentItem}" /> <f:setPropertyActionListener value="#{row}" target="#{CustomerBean.currentRow}" /> </a4j:commandLink> <rich:toolTip for="editlink" value="Edit" /> </rich:column> <rich:column styleClass="actionCell"> <a4j:commandLink ajaxSingle="true" id="deletelink" oncomplete="#{rich:component('deletePanel')}.show()"> <h:graphicImage value="/img/ico/delete.gif" style="border:0" /> <f:setPropertyActionListener value="#{row}" target="#{CustomerBean.currentRow}" /> </a4j:commandLink> <rich:toolTip for="deletelink" value="Delete" /> </rich:column> </rich:dataTable>
Each page has a rich:modalpanel für new Records:
<rich:modalPanel id="newPanel" autosized="true" width="450"> <f:facet name="header"> <h:outputText value="New Customer" /> </f:facet> <f:facet name="controls"> <h:panelGroup> <h:graphicImage value="/img/ico/close.png" id="hidelink3" styleClass="hidelink" /> <rich:componentControl for="newPanel" attachTo="hidelink3" operation="hide" event="onclick" /> </h:panelGroup> </f:facet> <h:form> <a4j:outputPanel ajaxRendered="true"> <h:panelGrid columns="2"> <h:outputText value="Customer" /> <h:inputText required="true" requiredMessage="Please enter a name for the new Customer" value="#{CustomerBean.newItem.company}" /> </h:panelGrid> <rich:messages styleClass="error" /> </a4j:outputPanel> <a4j:commandButton type="submit" value="Save Customer" action="#{CustomerBean.saveNew}" reRender="table" oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('newPanel')}.hide(); else #{rich:component('newPanel')}.show();" /> </h:form> </rich:modalPanel>
Each page has a rich:modalpanel for editing records:
<rich:modalPanel id="editPanel" autosized="true" width="450"> <f:facet name="header"> <h:outputText value="Edit Customer" /> </f:facet> <f:facet name="controls"> <h:panelGroup> <h:graphicImage value="/img/ico/close.png" id="hidelink" styleClass="hidelink" /> <rich:componentControl for="editPanel" attachTo="hidelink" operation="hide" event="onclick" /> </h:panelGroup> </f:facet> <h:form> <a4j:outputPanel ajaxRendered="true"> <h:panelGrid columns="2"> <h:outputText value="Customer" /> <h:inputText required="true" requiredMessage="Please enter a name for the current Customer" value="#{CustomerBean.currentItem.company}" /> </h:panelGrid> <rich:messages styleClass="error" /> </a4j:outputPanel> <a4j:commandButton type="submit" value="Save Customer" action="#{CustomerBean.save}" reRender="table" oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.hide(); else #{rich:component('editPanel')}.show();" /> </h:form> </rich:modalPanel>
And each page has a rich:modalPanel for deleting records:
<rich:modalPanel id="deletePanel" autosized="true" width="200"> <f:facet name="header"> <h:outputText value="Delete this Customer?" style="padding-right:15px;" /> </f:facet> <f:facet name="controls"> <h:panelGroup> <h:graphicImage value="/img/ico/close.png" styleClass="hidelink" id="hidelink2" /> <rich:componentControl for="deletePanel" attachTo="hidelink2" operation="hide" event="onclick" /> </h:panelGroup> </f:facet> <h:form> <table width="100%"> <tbody> <tr> <td align="center" width="50%"> <a4j:commandButton value="Yes" ajaxSingle="true" action="#{CustomerBean.delete}" oncomplete="#{rich:component('deletePanel')}.hide();" reRender="table" /> </td> <td align="center" width="50%"> <a4j:commandButton value="Cancel" onclick="#{rich:component('deletePanel')}.hide();return false;" /> </td> </tr> </tbody> </table> </h:form> </rich:modalPanel>
I also have the following at the end of each page:
<a4j:status onstart="#{rich:component('wait')}.show()" onstop="#{rich:component('wait')}.hide()" /> <rich:datascroller align="left" for="table" maxPages="10" page="#{CustomerBean.scrollerPage}" id="scroller" rendered="#{CustomerBean.numRecords > 20}" />