ui:include with method breaks the jsf's ajax function - ajax

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>