JSF/PrimeFaces: Issue in pages with a layout

Question

I have a problem with my JSF page which uses PrimeFaces components. As it may get long and boring quickly, I try to be as brief as possible. Consider this managed bean:

@Named(value = "testBean")
@RequestScoped
public class TestBean implements Serializable {

    private String test;

    public String update() {
        test = "Updated.";
        return "test";
    }

    // Getters and Setters...
}

Here's the body of test.xhtml, with irrelevant content and styles removed:

<h:body>
    <p:layout id="layout" fullPage="true">

        <p:layoutUnit position="north">
            <!-- Does not matter -->
        </p:layoutUnit>

        <p:layoutUnit id="input" position="west">
            <p:panel header="">
                <p:tabView>
                    <p:tab title="">
                        <!-- INPUTS and SUBMIT BUTTON -->
                    </p:tab>
                </p:tabView>
            </p:panel>
        </p:layoutUnit>

        <p:layoutUnit id="output" position="center">
            <h:form>
                <p:panel id="display" header="Information">  
                    <h:outputText value="#{testBean.test}" />  
                </p:panel>
                <p:separator />
                    <p:commandButton value="Update !" action="#{testBean.update()}" ajax="false" />
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="south">
            <!-- Does not matter -->
        </p:layoutUnit>

    </p:layout>
</h:body>

And everything works fine. I've got two problems though:

1. I should move the commandButton to another layoutUnit (input) and I can't place the <h:form> element in a reasonable position. I tried moving it beside <p:layout> so it encloses all layout units but it broke (the updated page no longer has the "Updated." string).

2. I want to perform the update via ajax with the button on another layoutUnit. When I remove the ajax="false" attribute from the commandButton and set an attribute of prependId="false" for the global form element, the output text does not get updated.

Thanks in advance for your help

Answer 1

I should move the commandButton to another layoutUnit (input) and I can't place the <h:form> element in a reasonable position. I tried moving it beside <p:layout> so it encloses all layout units but it broke (the updated page no longer has the "Updated." string).

I'm not sure if I understand your concrete problem. Just do something like this?

<p:layoutUnit id="input" position="west">
    <p:panel header="">
        <p:tabView>
            <p:tab title="">
                <!-- INPUTS and SUBMIT BUTTON -->
            </p:tab>
        </p:tabView>
        <h:form>
            <p:commandButton value="Update !" action="#{testBean.update}" ajax="false" />
        </h:form>
    </p:panel>
</p:layoutUnit>

<p:layoutUnit id="output" position="center">
    <p:panel id="display" header="Information">  
        <h:outputText value="#{testBean.test}" />  
    </p:panel>
    <p:separator />
</p:layoutUnit>

---

I want to perform the update via ajax with the button on another layoutUnit. When I remove the ajax="false" attribute from the commandButton and set an attribute of prependId="false" for the global form element, the output text does not get updated.

The update ID has to be the relative or absolute client ID. As to how to figure the right client ID, check this answer: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

The PrimeFaces layout component isn't a NamingContainer, so its ID won't be prepended, and once you take the <h:form> out the center layout, then the <p:panel id="display"> is reachable from the command button by :display. Thus, this should do:

<p:layoutUnit id="input" position="west">
    <p:panel header="">
        <p:tabView>
            <p:tab title="">
                <!-- INPUTS and SUBMIT BUTTON -->
            </p:tab>
        </p:tabView>
        <h:form>
            <p:commandButton value="Update !" action="#{testBean.update}" update=":display" />
        </h:form>
    </p:panel>
</p:layoutUnit>

<p:layoutUnit id="output" position="center">
    <p:panel id="display" header="Information">  
        <h:outputText value="#{testBean.test}" />  
    </p:panel>
    <p:separator />
</p:layoutUnit>