title: JSF2 Dynamically loading pages by ajax
body: <p>I want to load pages into a central div when i click my menu links in JSF2.0. I set up a panelmenu and wrote a menu item like this.</p>
  
  <pre><code>&lt;p:menuitem &gt;
  &lt;h:commandButton value="Edit Details"  action="#{formsBean.changeDisplay(1)}"&gt;
   &lt;f:ajax  render=":editdiv"&gt;&lt;/f:ajax&gt;
  &lt;/h:commandButton&gt;
  &lt;/p:menuitem&gt;
  </code></pre>
  
  <p>The component to be updated is:</p>
  
  <pre><code>&lt;h:panelGroup id="editdiv" rendered="#{formsBean.edituserdiv}" layout="block"&gt;
    &lt;ui:include src="edituserdetails.xhtml"&gt;
  
   &lt;/ui:include&gt;
   &lt;/h:panelGroup&gt;
  </code></pre>
  
  <p>The function <code>formsBean.changeDisplay(1)</code> sets <code>edituserdiv</code> to true to show the corresponding panel group.</p>
  
  <p>In the included page i have a form defined.</p>
  
  <p>Also in the main page i call a pre-render function to set all divs to false to show no div on first page load.</p>
  
  <p>The problem is that when i click the menu item the included page is not being included. Any pointers?</p>