JSF2 navigation through ajax

Question

I just saw this post before link.

I tried to set up a sample project based on this. Just replace the primeface button with a jsf commandButton. See below:

template.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"  
  xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <!-- Links to CSS stylesheets... -->
    <title>title</title>
</h:head>

<h:body>
    <div id="wrapper">
        <div id="header">header</div>
        <script>alert("test");</script>
        <h:panelGroup id="content">
            <ui:insert name="content">
                Sample content.
            </ui:insert>
        </h:panelGroup>
    </div>

    <div id="footer">footer</div>
</h:body>

page1.xhtml looks like this:

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"  
            template="./template.xhtml">

<ui:define name="content">
    <h2>Page 1</h2>

    <h:form>
        <p>bla</p>
        <h:commandButton value="page2" action="page2">
            <f:ajax render=":content"></f:ajax>
        </h:commandButton>
    </h:form>
</ui:define>

finally page2.xhtml looks like this:

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"  
            template="./template.xhtml">

<ui:define name="content">
    <h2>Page 2</h2>

    <h:form>
        <p>blabla</p>
        <h:commandButton value="page1" action="page1">
            <f:ajax render=":content"></f:ajax>
        </h:commandButton>
    </h:form>
</ui:define>

As you can see I have a short javascript on the template.xhtml. I want now that this javascript is not called when a change from page1 to page2. So I thought with this ajax navigation just the content part is updated and the script isn't called on a page change.

But when I am clicking on the commandButton the script will be executed. I had a look on firebug and saw that the hole body part updated, not only the content div.

What I am doing wrong? Is it possible to make a navigation only on the content part with this templating technique? Or do I have to search for another approach to solve this problem?

I am using tomcat and myfaces.

Thanks in advance!

I double checked the firebug output an saw, that the response from the server on a page change is the full html site. So it seems to be, that the ajax doesn't work at all. — Jurek

Ravi Kadaboina Ravi Kadaboina · Accepted Answer · 2012-07-12T02:19:05

I don't think it is possible. If you are changing the view to page2 from page1, essentially the page2 is built starting from the template.

If you want the script to run for page1, then include it in the content of page1 that is inserted into the template and do not include it in page2, that way you will be calling the script only where required not in the master template.

JSF2 navigation through ajax

1 Answers