action is only invoked on second click

I want to submit a data table on a button click, but that action is not called on the first click. Here is my code:

<h:panelGrid id="addToThisDepartmentPanel">
    <h:outputText value="#{messageDataBean.message}" rendered="#{messageDataBean.isSuccess eq false}" style="color:red" id="addToThisDepartmentMessage"/>
    <h:form>
        <h:dataTable value="#{systemResultViewUtil.systemUserDetailDataBeansList}" var="departmentdetail" id="addToThisDepartmentDataTable" rendered="#{systemResultViewUtil.systemUserDetailDataBeansList.size() gt 0}">
            <h:column>
               <f:facet name="header">
                   Name
               </f:facet>
               <h:outputText value="#{departmentdetail.name}" style="text-align: left;padding-right: 120px" />
            </h:column>
            <h:column>
                <f:facet name="header">
                    Current Department
                </f:facet>
                <h:outputText value="#{departmentdetail.depName}" style="text-align: left;padding-right: 120px" />
            </h:column>
            <h:column>
                <f:facet name="header">
                    Add To This
                </f:facet>
                <h:selectBooleanCheckbox value="#{departmentdetail.cheked}" style="text-align: left;padding-right: 120px"/>
            </h:column>
         </h:dataTable>

         <a4j:commandButton oncomplete="if(#{messageDataBean.isSuccess eq true}){ closeAddToThisDepartmentDialog()}" value="Add TO This Department" action="#{departmentServiceBean.addEmployeeToThisDepartment}" id="addToThisDepartmentButton"
                                                       render=":addToThisDepartmentMessage :message" execute=":addToThisDepartmentDataTable" />
     </h:form>
</h:panelGrid>

The problem is that on the second click my <a4j:commandButton> action is called. But it is not called on the first click.
Any ideas?

BalusC

This problem is known as JSF spec issue 790. If you ajax-render some content which in turn contains a <h:form>, then its view state will get lost, which causes that the 1st action inside that form won't invoke anything. On the ajax response of the first action, the form will get new view state and thus any subsequent actions will succeed.

This is scheduled to be fixed for the upcoming JSF 2.2. But right now with JSF 2.0/2.1 you have to introduce a workaround. You first need to give the <h:form> a fixed ID which is yourFormId in the below example:

<h:panelGrid id="addToThisDepartmentPanel">
    ...
    <h:form id="yourFormId">
        ...

Then you need to reference it in the render attribute as well:

<f:ajax ... render=":addToThisDepartmentPanel :yourFormId" />

The same story applies to <a4j:xxx> components.

<a4j:commandButton ... render=":addToThisDepartmentPanel :yourFormId" />

<a4j:commandbutton> action is only invoked on second click

See also: