2 Replies Latest reply on Dec 14, 2009 7:52 AM by Max Zellhofer

    Problem with <rich:modalPanel> and Internet Explorer

    Max Zellhofer Newbie

      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)

      newpanel.jpg
      It should look like this (like it does in Firefox):

      new_ff.jpg

       

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