The Rich:commandLink and rich:commandButton on a dynamically rendered popup panel do not work in IE 8

Question

I have created a JSF application using Myfaces 2.1.12 and Richfaces 4.3.3. On normal browsers the application works fine, but the client insists that he also needs to use a "browser" - IE8, version 8.0.7601. I am having a bunch of problems.

I have a rich:extendedDataTable on the main form. Clicking a row is to open a popup with the details (that is rendered and filled with the data from the selected row). The popup can also be called from a toolbar, this way it displays the details of the row that was selected when the page was first loaded.

The table is defined as follows (column definition removed for clarity)

<h:form>
    <rich:extendedDataTable id="table" rowClass="row" rows="15"
        value="#{scheduleController.allSchedules}" var="schedule" selectionMode="single"
        selection="#{scheduleListBean.selectedSchedule.selection}" clientRows="15">
        <a4j:ajax render="scheduleDetails, toolbar, transferListPopup" event="selectionchange"
            listener="#{scheduleController.scheduleSelectionChanged}"
            oncomplete="#{rich:component('scheduleDetailsPopup')}.show()"/>

        ...
    </rich:extendedDataTable>
</h:form>

The popup contains a couple of panel grids, one of wich contains some buttons.

<h:panelGrid columns="2" styleClass="alignTop" id="scheduleDetails">
    ...

    <rich:panel header="#{generalProperties.controls}">
        <h:panelGrid columns="4">

            <a4j:commandLink styleClass="btn" type="button"
                render="table@body, transferDetailsPanel, destinationPanel, datesPanel"
                oncomplete="if (#{facesContext.maximumSeverity == null}) #{rich:component('scheduleDetailsPopup')}.hide()"
                status="pleaseWait" action="#{scheduleController.saveSchedule}"
                value="#{generalProperties.save}" />


            <h:commandButton class="btn" action="#{scheduleController.changeScheduleStatus}"
                value="#{applicationProperties.changeStatus}" status="pleaseWait" type="button"
                disabled="#{scheduleController.currentSchedule.id == null}">
                <rich:componentControl target="changeScheduleStatusPopup" operation="show" />
            </h:commandButton>

            <h:commandButton class="btn" value="#{generalProperties.delete}" status="pleaseWait" type="button"
                disabled="#{scheduleController.currentSchedule.id == null}">
                <rich:componentControl target="removeSchedulePopup" operation="show" />
            </h:commandButton>

            <a4j:commandButton styleClass="btn" type="button"
                render="fileTable, transferDetailsPanel, destinationPanel, datesPanel"
                disabled="#{scheduleController.currentSchedule.id == null}"
                oncomplete="if (#{facesContext.maximumSeverity == null}) #{rich:component('transferListPopup')}.show()"
                status="pleaseWait" value="#{applicationProperties.transferHistory}" />

        </h:panelGrid>
    </rich:panel>

</h:panelGrid>

The disabled="#{scheduleController.currentSchedule.id == null}" part checks the bean if anything is selected as the popup is also used to add new rows.

Everything works fine on firefox. On IE8:

• clicking the commandLink does not work(nothing happens, besides a "#" that is appended to the url in the browser) when the popup is called from the extended data table (rendered), but works when it is called from the toolbar.
• clicking the commandButton does not work(page is reloaded instead of an ajax request beeing executed) when the popup is called from the extended data table (rendered), but works when it is called from the toolbar.
• if I remove the type="button" from command buttons, then clicking them causes the entire page to be reloaded

What am I missing?

Answer 1

The answer was in the question itself. I rebuilt the UI so that no buttons are rendered in ajax requests. This way it works both on IE 8 and IE 9.

Ie.: Instead of setting the disabled attribute based on a bean and rendering the buttons I had to use two instances of each of those buttons. I did that by extracting a form into a composite component using composite:insertChildren just to inject buttons in the proper state and having two instances of the form on the page, showing the right one when the user clicked new schedule / edit schedule.

The drawback of this method is that I had to set the render attribute of the components that show the popup to something different then forms (in this case - panels), which would be an issue if I used Mojarra (see this question: javax.faces.ViewState is missing after ajax render)