Partial page update when navigating (PrimeFaces ajax)

I have done a basic JSF app, using facelets templates. My template is as follows:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>
        <!-- Links to CSS stylesheets... -->
        <title><ui:insert name="title" /> - FManager</title>
    </h:head>

    <h:body>
        <div id="wrapper">
            <div id="header"> <b>FManager</b> Application </div>

            <div id="content">
                <p:growl id="growl" />
                <ui:insert name="content">
                    Sample content.
                </ui:insert>
            </div>
        </div>

        <div id="footer">Made using JSF and Primefaces</div>
    </h:body>
</html>

And then I have a Main Page (shown below) that navigates to a Second Page. Both pages use the template above.

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./template.xhtml">

    <ui:define name="title">Main page</ui:define>

    <ui:define name="content">
        <h2>Welcome to the <b>FManager</b> application</h2>

        <h:form>
            <p>Click the button below to create the first entry!</p>
            <p:commandButton value="Create entry" action="create" />
        </h:form>
    </ui:define>

</ui:composition>

If I use <redirect/> in faces-config.xml, it navigates, but the full page is reloaded. My question is:

Is there a way to navigate from a page to another updating ONLY the <ui:insert> sections of the template? (While leaving the rest of the page intact)

Thanks!

You can reload content by ajax, but URL will stay the same. If you can afford that, update the code as follows:

In template.xhtml, replace

<div id="content">

<h:panelGroup id="content" layout="block">

And in somepage.xhtml, replace

<p:commandButton value="Create entry" action="create" />

<p:commandButton value="Create entry" action="create" update=":content" />

Finally get rid of the <redirect /> (actually, prefer to get rid of all navigation cases since they make the faces-config.xml file bloated). A redirect can by the way also be specified in the outcome as in action="create?faces-redirect=true".

This does only not update the <title>. You could however do that with a simple JavaScript line.

来源：https://stackoverflow.com/questions/5685354/partial-page-update-when-navigating-primefaces-ajax

标签

ajax

jsf

facelets

primefaces