JSF2 Dynamically loading pages by ajax

Question

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:menuitem >
<h:commandButton value="Edit Details"  action="#{formsBean.changeDisplay(1)}">
 <f:ajax  render=":editdiv"></f:ajax>
</h:commandButton>
</p:menuitem>

The component to be updated is:

<h:panelGroup id="editdiv" rendered="#{formsBean.edituserdiv}" layout="block">
  <ui:include src="edituserdetails.xhtml">

 </ui:include>
 </h:panelGroup>

The function formsBean.changeDisplay(1) sets edituserdiv to true to show the corresponding panel group.

In the included page i have a form defined.

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.

The problem is that when i click the menu item the included page is not being included. Any pointers?

partlov partlov · Accepted Answer · 2013-03-14T15:04:23

The problem is because initially your h:panelGroup is not rendered so AJAX request can't find it in generated code, so it can't update it. Encapsulate it in another h:panelGroup and render it:

<h:panelGroup id="editdivParent" layout="block">
  <h:panelGroup id="editdiv" rendered="#{formsBean.edituserdiv}" layout="block">
    <ui:include src="edituserdetails.xhtml">

    </ui:include>
  </h:panelGroup>
</h:panelGroup>

And change your f:ajax to:

<f:ajax  render=":editdivParent"/>

JSF2 Dynamically loading pages by ajax

1 Answers