Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>JSF's <code>&lt;ui:insert&gt;</code> is used in creating templates. According to your code, I think the 1st piece of code is the template <code>parentBranches.xhtml</code>. And the 2nd piece of code is the template client <code>customerVoice.xhtml</code> which used the above template. In brief, <code>template + template client = page</code>. If you want to open <code>customerVoice.xhtml</code> page, you have to navigate to that page. You cannot do it with Ajax. </p> <p>In general, I can think of 2 ways to achieve your goal:</p> <ol> <li><p>Don't use Ajax by removing the whole <code>&lt;f:ajax&gt;</code> and leave it as:</p> <pre><code>&lt;h:commandLink action="customerVoice"&gt;&lt;h2&gt;contact&lt;/h2&gt;&lt;/h:commandLink&gt; </code></pre></li> <li><p>Use <a href="http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/" rel="nofollow noreferrer"><code>&lt;ui:include&gt;</code></a>. </p> <ul> <li><p>In your 1st .xhtml page, you can change the <code>ContentLoader</code> portion to something like this:</p> <pre><code>&lt;h:panelGroup id="ContentLoader" &gt; &lt;div id="CONTENT_CONTAINER"&gt; &lt;ui:include src="#{mrBean.page}" /&gt; &lt;/div&gt; &lt;/h:panelGroup&gt; </code></pre></li> <li><p>Change your link like the following:</p> <pre><code>&lt;h:commandLink actionListener="#{mrBean.openPage('customerVoice.xhtml')}" value="contact" style="font-size: large"&gt; &lt;f:ajax render="ContentLoader" /&gt; &lt;/h:commandLink&gt; </code></pre></li> <li><p>Create a <code>ManagedBean</code> to control the content. It should be like this:</p> <pre><code>@ManagedBean @RequestScoped public class MrBean { private String page; public MrBean() { this.page = "The link to the page that contains your default content"; } public void openPage(String thePage) { this.page = thePage; } } </code></pre></li> </ul></li> </ol> <p>You can take a look at this <a href="https://stackoverflow.com/questions/8718727/rendering-only-a-fragment-of-the-page/8724525#8724525">answer</a> for another example about <code>&lt;ui:include&gt;</code>. This <a href="http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/" rel="nofollow noreferrer">tutorial</a> from <em>Mkyong.com</em> may also be useful to you.</p> <p><strong>UPDATE:</strong> This is a test page for you to try out:</p> <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"&gt; &lt;h:head&gt; &lt;title&gt;Facelet Title&lt;/title&gt; &lt;/h:head&gt; &lt;h:body &gt; &lt;h:form id="form"&gt; &lt;h:commandLink actionListener="#{mrBean.openPage('Full URL to your customerVoice.xhtml')}" value="contact" style="font-size: large"&gt; &lt;f:ajax render="ContentLoader" /&gt; &lt;/h:commandLink&gt; &lt;h:panelGroup id="ContentLoader" &gt; &lt;div id="CONTENT_CONTAINER"&gt; &lt;ui:include src="#{mrBean.page}" /&gt; &lt;/div&gt; &lt;/h:panelGroup&gt; &lt;/h:form&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload