Partial Page Rendering using Primefaces - update is fired too early when using ?

Question

I have a Webapp using Primefaces 3.3.1 (runnning on Glassfish 3.0.1) in which the user can choose the desired content in a menu. Since only a part of the page is to be refreshed, I want to use partial page refreshing with AJAX. The method to store the URL is provided in the actionListener-attribute of the commandButton, whereas the id of the component which must be updated is provided in the update-attribute of the commandButton.

I'll attach my sample sourcecode first - which I got from another thread regarding PPR, but was confirmed to be working:

main.xhtml

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

    <h:body>
        <h:panelGroup id="content" layout="block">
            <ui:include src="#{navBean.activePage}" />
        </h:panelGroup>

        <h:form>
            <p:commandButton value="next"
                             actionListener="#{navBean.next}" 
                             update=":content" />
            <p:commandButton value="back"
                             actionListener="#{navBean.back}" 
                             update=":content" />
        </h:form>
    </h:body>
</html>

NavBean

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

@ManagedBean
@SessionScoped
public class NavBean {

    private String activePage = "somepage.xhtml";


    public String getActivePage() {
        return activePage;
    }


    public void setActivePage(String activePage) {
        this.activePage = activePage;
    }


    public void next(ActionEvent e) {
        this.setActivePage("someotherpage.xhtml");
    }


    public void back(ActionEvent e) {
        this.setActivePage("somepage.xhtml");
    }
}

Sample included page ("somepage.xhtml")

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

    <h2>Just some content for testing purposes</h2>

</ui:composition>

Now, the problem is, that getActivePage is always called before setActivePage - which is obviously a problem because one would have to click a button twice for getting the new content.

I have a feeling that I am missing something essential here, buts earching on Google/stackoverflow did not bring any applicable results.

Update: Replacing actionListener with action did not work (I of course changed the input parameters of the called methods accordingly).

As erencan suggested in his comment below, I replaced the <ui:include> with a <h:outputText>for displaying only a string:

<h:outputText value="#{navBean.activePage}" />

Contrary of my expectations, this is working fine. So why does <h:outputText> work, whereas <ui:include> does not? Using the former is not an option, since I want to use JSFs templating features.

as far as i am concerned the pa must be interpreted by the server. so only changing the attribute value does not work. you should refresh the page. or you can render the page content as strings. — erencan, Aug 23 '12 at 11:17
Hope I understood your comment right - did you stumble across the fact that I did not include the source of the included files? (namely "somepage.xhtml" and "someotherpage.xhtml") I'll include a sample of these in a minute... I'll also try rendering the page content as strings, although I doubt this will solve the issue. Refreshing the page, however, is not an option, since this is what I try to avoid by using PPR. — Janis K., Aug 23 '12 at 11:29
my claim is changing the value of the ui:include by using ajax will not affect the actual page. i think you should render the actual page not the page name.I find a similar question to yours. i hope it helps. http://stackoverflow.com/questions/7746221/how-to-do-partial-page-rendering-center-content-with-jsf2-templating-via-ajax — erencan, Aug 23 '12 at 11:50
Thanks @erencan! In the question you linked, I found another link to this [answer](http://stackoverflow.com/questions/7108668/how-to-ajax-refresh-the-main-content-part-by-navigation-menu/7113961#7113961) to a similar question. After a little customizing of the sourcecode I got from there, I finally got it working. If you want, post it as an answer and I'll accept it (otherwise, for the sake of completeness, I'll answer the question myself). — Janis K., Aug 23 '12 at 12:39
you are welcome. it is better that you write an answer. you have opportunity to sent complete codes for further questions. — erencan, Aug 23 '12 at 13:00

score 1 · Accepted Answer · edited May 23 '17 at 12:33

I finally solved the problem, using this answer to a simliar question. I'll post my code here, so that anyone coming across the same problem may use it:

main.xhtml

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

    <h:body>
        <h:panelGroup id="header" layout="block">
            <h1>Header</h1>
        </h:panelGroup>
        <h:panelGroup id="menu" layout="block">
            <h:form>
                <f:ajax render=":content">
                    <p:commandButton value="next" action="#{navBean.next}" process="@this"/>            
                    <p:commandButton value="back" action="#{navBean.back}" process="@this"/>
                </f:ajax>
            </h:form>
        </h:panelGroup>
        <h:panelGroup id="content" layout="block">
            <h:panelGroup rendered="#{navBean.activePage == 'firstAjax'}">
                <ui:include src="firstAjax.xhtml" />
            </h:panelGroup>
            <h:panelGroup rendered="#{navBean.activePage == 'lastAjax'}">
                <ui:include src="lastAjax.xhtml" />
            </h:panelGroup>
        </h:panelGroup>
    </h:body>
</html>

This code is basically taken from the linked answer, but I had to tweak it a bit (basically, changed the <h:commandLink> to <p:commandButton>, because the former somehow did not call the methods provided in action).

NavBean.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class NavBean {

    private String activePage = "firstAjax";


    public String getActivePage() {
        return activePage;
    }


    public void setActivePage(String activePage) {
        this.activePage = activePage;
    }


    public void next() {
        this.setActivePage("lastAjax");
    }


    public void back() {
        this.setActivePage("firstAjax");
    }
}

Just a standard ManagedBean holding a variable.

firstAjax.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:form>
        <h2>content...</h2>
    </h:form>
</ui:composition>

The included XHTML-Page. lastAjax.xhtml is nearly the same.

Partial Page Rendering using Primefaces - update is fired too early when using ?

1 Answers1