Page Freezes When a4j:commandLink is Clicked After Clicking on h:commandLink

Question

I have a jsf page with its backing bean. The page contain h:formwith numerous input fields and buttons. The entire page is being submitted with h:commandLink, while there are several a4j:commandLink buttons as well. By clicking on a4j:commandLink button after the page has been submitted by h:commandLink, the page enters in "Loading, please wait" status indefinitely.

The page looks like:

<a4j:region>
    <rich:dataTable id="itemsTable" ...>
        <!-- richColumns-->

        <rich:column>
            <a4j:commandLink id="calculate_item" action="#{BackingBean.calculateItem}" value="Calculate" reRender="itemsTable">
                <f:param name="itemIndex" value="#{rowIndex}" />
            </a4j:commandLink>

            <a4j:commandLink id="delete_item" immediate="true" action="#{BackingBean.cleanItem}" value="Delete" reRender="itemsTable">
                <f:param name="itemIndex" value="#{rowIndex}" />
            </a4j:commandLink>
        </rich:column>

        <f:facet name="footer">
            <!-- richColumns-->

            <rich:column>
                <a4j:commandLink id="sum_all" styleClass="submit input-submit" action="#{BackingBean.calculateTotalSum}" value="Calculate Total" reRender="itemsTable" />
            </rich:column>
        </f:facet>
    </rich:dataTable>
</a4j:region>

<h:commandLink id="save" styleClass="submit" value="Save" action="#{BackingBean.save}" />

My BackingBean looks as follows:

public class BackingBean {

    // Fields and methods

    public void calculateItem() {
        // calculates
    }

    public void calculateTotalSum() {
        // calculates total
    }

    public String save() {
        boolean formIsValid = true;

        // do validations

        // save if the form is valid

        return formIsValid ? "success" : null;           
    }
}

• When I press on "Calculate" button or "Calculate Total" button everything works fine.
• When I press on "Save" button everything works fine (if the form has invalid fields (like required fields are empty), then validation messages are shown).
• When there are some invalid fields and I press "Save" button, then "Calculate" everything works fine.
• When there are some invalid fields and I press "Save" button, then "Calculate Total" the page falls into the page enters in "Loading, please wait" status indefinitely.

The question is: Why a4j:commandLink "Calculate" and "Calculate Total" behave differently and how to fix the problem with a4j:commandLink "Calculate Total" (what's wrong with it)?

P.S. Forgot to mention one thing: If I substitute

 <a4j:commandLink id="sum_all" action="#{BackingBean.calculateTotalSum}" value="Calculate Total" reRender="itemsTable" />

with

<h:commandLink id="sum_all" action="#{BackingBean.calculateTotalSum}" value="Calculate Total">
    <a4j:support reRender="itemsTable" event="" />
</h:commandLink>

everything works just fine with one limitation: all validation messages are being removed after button click.

Answer 1

I finally solved the issue. The reason was the css "submit" class which was used for "Calculate Total" button with "input-submit" class. I tried to find the exact attribute causing the issue but I couldn't. So a workaround solution was: to add a new css class: "audit-input-submit" which was a combination of the attributes of both "submit" and "input-submit" classes (excluding duplicates). After that the problem solved. Of course, if I could find the exact css attribute value which was causing the issue would be better.