How to include dinamically xhtml pages via ajax
dcerrano Jan 7, 2012 4:34 PMHello everybody!. I'm a new guy in richfaces, and I need to know how to include a page dinamically without reload the main page.
My main page looks like:
<h:body> <rich:panel id="main_content"> <f:facet name="header">AJAX LOADING VS FULL LOADING</f:facet> <f:subview id="main_view"> <ui:include src="./#{page.value}" /> </f:subview> </rich:panel> </h:body>
By default, the value of page.value is "list.xhtml", which is a xhtml file that has a list of item (<a4j:commandLink />).
My list.xhtml is:
<h:body> <h:form> <rich:panel> <f:facet name="header">#{page.value}</f:facet> <h:outputText value="I'm a list page!" /> </rich:panel> <c:forEach begin="1" end="10" varStatus="i"> <a4j:commandLink value="Item #{i.index}" action="#{page.setValue('detail')}" render="main_content" > </a4j:commandLink> </c:forEach> </h:form> </h:body>
The idea of list.xhtml is to list items of <a4j:commandLink> and when the user clicks on any item, the value of the backing bean page.value will be "detail.xhtml", and then only the <rich:panel id="main_content"> must to be reloaded, not all the document. The main_content won't be the list.xhtml anymore(because page.value is "detail.xhtml").
The detail.xhtml file is:
<h:body> <h:form> <a4j:commandLink value="Back -> Ajax reload" action="#{page.setValue('list')}" render="main_content" > </a4j:commandLink> <rich:panel> <f:facet name="header">#{page.value}</f:facet> <h:outputText value="I'm a detail page!" /> </rich:panel> </h:form> </h:body>
So, when the user clicks on link "Back", the main_content will be reloaded with "list.xhtml" (again via ajax).
When I click on any a4j:commandLink, the value of the backing bean page.value changes successfully, but the main content is not reRendered, even the title of the <rich:panel id="main_content"> changes, but not the content.
Is correct to code this way when you want to change pages dinamically via ajax?
My backing bean "page" is:
import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; /** * * @author diego */ @ManagedBean @SessionScoped public class Page { private String value = "list.xhtml"; public String getValue() { return value; } public void setValue(String page) { if (page.compareTo("list") == 0) { this.value = "list.xhtml"; } else if (page.compareTo("detail") == 0) { this.value = "detail.xhtml"; } } }
I hope someone has the right answer, I will really appreciate it.
P.D. Sorry for my english.
-
Page.java.zip 429 bytes
-
detail.xhtml.zip 579 bytes
-
list.xhtml.zip 605 bytes
-
main.xhtml.zip 560 bytes