Question

My Ajax codes for rendering a form using a newly-selected locale are:

<h:selectOneMenu id="selectLang" immediate="true" value="#{langListing.language}">
   <f:ajax listener="#{langListing.changeLocale}" render="@form" />
   <f:selectItems value="#{langListing.languages}" />
</h:selectOneMenu>

However, since the above codes in in a header file called header.xhtml, the above codes only render the content of header.xhtml when I switch locales between English and French. My index.xhtml structure is as follow:

header.xhtml
menu.xhtml
body content with an id of "contentSection"
footer.xhtml

How can I render menu.xhtml, the body section and footer.xhtml at the same time as I render header.xhtml?

Answer 1

The @form affects the content of parent <h:form> only. Use @all instead.

<f:ajax listener="#{langListing.changeLocale}" render="@all" />

See also the description of the render attribute in <f:ajax> tag documentation.

However, since changing the locale affects the entire page anyway, you could also consider to fire a synchronous request instead of an ajaxical one. To achieve this, remove the <f:ajax> tag, add a onchange="submit()" to the dropdown and move the code inside changeLocale() into setLanguage() method. See also this answer for a concrete example.