JSF Buttons in forms sometimes don't perform action

Question

I have problem with organizing forms. When I make one form some buttons (or any other components making ajax calls) don't perform action but they do perform update. When I split the form into two new ones the buttons start working.

In this case buttons and autocomplete don't work.

<h:form styleClass="question-#{cc.attrs.question.id}">
    ...

    <p:commandButton value="add answer" update="@form" action="#{questionEditorBean.addAnswer}" />
    <p:commandButton value="save" update="@(.question-#{cc.attrs.question.id})" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />
    <p:commandButton value="cancel" onclick="#{cc.attrs.onCancel}" />

    <p:autoComplete value="#{questionEditorBean.newTag}" id="tagSelect" completeMethod="#{tagBean.completeTag}" dropdown="true"  
                var="t" itemLabel="#{t.name}" itemValue="#{t}" converter="#{tagConverter}" forceSelection="true">
    <p:ajax event="itemSelect" action="#{action}" update="@form"/>
</p:autoComplete>
</h:form>

When I split the form everything works.

<h:form styleClass="question-#{cc.attrs.question.id}">
    ...

    <p:commandButton value="add answer" update="@form" action="#{questionEditorBean.addAnswer}" />
    <p:commandButton value="save" update="@(.question-#{cc.attrs.question.id})" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />
    <p:commandButton value="cancel" onclick="#{cc.attrs.onCancel}" />

</h:form>
<h:form>

    <p:autoComplete value="#{questionEditorBean.newTag}" id="tagSelect" completeMethod="#{tagBean.completeTag}" dropdown="true"  
                var="t" itemLabel="#{t.name}" itemValue="#{t}" converter="#{tagConverter}" forceSelection="true">
    <p:ajax event="itemSelect" action="#{action}" update="@form"/>
</p:autoComplete>
</h:form>

I don't have nested forms. I am running to this problem all the time. I don't understand this behaviour and I don't want to split buttons and components into more forms when they should be conceptually together. Is there a solution?

Answer 1

You could try giving the form an id and set prependId="false" , as in this example:

<h:form id="ccForm" prependId="false">

Then you add the form id to all update targets.

<p:ajax event="itemSelect" action="#{action}" update="ccForm:tagSelect" />

This way you make explicit what are the update targets inside your composite component.

Also I noticed that you're trying to use styleClass as an id in your form, and trying to update it. Following this way I suggested, make its update property look like this:

<p:commandButton value="save" update="ccForm:question-#{cc.attrs.question.id}" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />

I hope it helps.