title: ajax with ui:insert in JSF
body: <p>I have JSF page as follows:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"&gt;
      &lt;h:head&gt;
        ...
      &lt;/h:head&gt;
  &lt;h:body&gt;
      &lt;h:form&gt;
        &lt;div id="VERTICAL_MENU"&gt;
            &lt;ul id="menu" class="mainMenu"&gt;
               &lt;li&gt;&lt;div class="noSub"&gt;&lt;/div&gt;&lt;h:commandLink action="customerVoice.xhtml"&gt;&lt;h2&gt;contact&lt;/h2&gt;&lt;f:ajax render="ContentLoader" /&gt;&lt;/h:commandLink&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="INNER_CONTENT_ROW" &gt;
    &lt;h:panelGroup id="ContentLoader" &gt;
         &lt;div id="CONTENT_CONTAINER"&gt;
             &lt;ui:insert name="ContentPage" &gt;Default Content&lt;/ui:insert&gt;
         &lt;/div&gt;
     &lt;/h:panelGroup&gt;
  &lt;/div&gt;
  &lt;/h:form&gt;
  &lt;/h:body&gt;
  </code></pre>
  
  <p>I want load the <code>&lt;ui:insert&gt;</code> content by <code>&lt;f:ajax&gt;</code>, but it does not work. </p>
  
  <p>The desired content is as follows:</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:ui="http://java.sun.com/jsf/facelets"&gt;
      &lt;ui:composition template="/parentBranches.xhtml"&gt;
          &lt;ui:define name="ContentPage" &gt;
              &lt;div id="pageContent" &gt;
                  &lt;div id="TITLE" &gt;&lt;h1 class="tBox" &gt;&lt;h:outputText value="در دست ساخت" /&gt;&lt;/h1&gt;&lt;/div&gt;
                  &lt;div class="fullClear" &gt;&lt;/div&gt;
                  &lt;div class="UP_BUttON" &gt;
                      &lt;h:commandLink &gt;&lt;img src="images/feed.png" class="feedButton" /&gt;&lt;/h:commandLink&gt;
                      &lt;h:commandLink &gt;&lt;img src="images/printer.png" class="printButton" /&gt;&lt;/h:commandLink&gt;
                  &lt;/div&gt;
                  &lt;div class="fullClear" &gt;&lt;/div&gt;
                  &lt;div id="CONTEXT" &gt;
                      &lt;div class="cImg" &gt;&lt;h:graphicImage url="images/sample.png" /&gt;&lt;/div&gt;
                      &lt;h:outputText value="content" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/ui:define&gt;
      &lt;/ui:composition&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I click the link, no action is done and page content does not change.</p>