ui:include with method breaks the jsf's ajax f

Question

I'm facing a pretty similar issue on which I already made a ticket but now the problem arises in my main project. The previous ticket involved a test project. Here's the link to the ticket. I'll first explain my project briefly and then provide the code.

It's a basic ui since I left out irrelevant parts, but when you start the webapp you should be directed to the main page which has an intro loaded through the use of ajax. I'm using a managedbean called Navigation which is a simple pojo with 2 annotations and one string property called 'page'. I've set the property to 'intro', so it's loaded by default.

// Navigation.java
@ManagedBean
@RequestScoped
public class Navigation {

  private String page = "intro";

  public String getPage() {
      return page;
  }

  public void setPage(String page) {
    this.page = page;
  }
}

index.xhtml looks like this:

<!-- index.xhtml -->
<h:body>
    <!-- Navigation -->
    <h:form>
        <p:menubar>
            <p:menuitem value="Home" icon="ui-icon-home" action="#{navigation.setPage('intro')}" update=":contentPanel" />
            <p:submenu label="Actions" icon="ui-icon-transferthick-e-w">
                <p:submenu label="Employee">
                    <p:menuitem value="Search" action="#{navigation.setPage('employee/find')}" update=":contentPanel" />
                </p:submenu>
            </p:submenu>
        </p:menubar>
    </h:form>
    <!-- ContentPanel -->
    <p:panel id="contentPanel" styleClass="content">
       <ui:include src="/#{navigation.page}.xhtml" />
    </p:panel>
</h:body>

Now, when you navigate to 'Actions/Employee/Create new' the file find.xhtml does get loaded into the main page but, the form itself doesn't work. Here's the file:

<!-- find.xhtml -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui"
            xmlns:f="http://java.sun.com/jsf/core">
    <f:facet name="header">
      Create new employee
    </f:facet>
    <h:outputLabel value="User ID: " for="userId" />
    <p:inputText value="#{managedEmployee.userId}" id="userId" />
    <p:commandButton value="Show" update="result" />
    <h:outputText id="result" value="#{managedEmployee.userId}" />
</ui:composition>

So a user would be able to input a userId in the form and it would be displayed near the form when commandbutton is pressed. Obviously I must be doing something wrong but I can't seem to figure it out. I don't like saying it, but I'm desperate for an answer.

Thanks in advance!

Answer 1

I may not be understanding the question, but you don't have an action set on your commandButton so of course it's not going to do anything.

 <p:commandButton value="Show" update="result" />

should have something like

 <p:commandButton value="Show" update="result" action="#{backer.method}"/>

Answer 2

I've found a solution for my problem. Not sure what the reason is but if I surround the code in ui:composition with h:form and add that form id to update on the link it works. Hope this helps others when they encounter it. Cheers

<p:menuitem value="Create" action="#{navigationBean.setPage('employee/create')}" update=":contentPanel :form" />

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:p="http://primefaces.org/ui">
  <h:form id="form">
    ...
  </h:form>
</ui:composition>