Hi,

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}" />