Partial Page Rendering (primefaces) need two times click before changing

Question

I'm trying to apply this answer to rendering a part of my primefaces page but the problem is that I need to click twice before getting the part changed is there a solution ?

this is my code

index.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:head>
 </h:head>
  <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}" />            
                <p:commandButton value="back" action="#{navBean.back}" />
            </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>

and this is my managedBean

 package com.project.beans;

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

 @ManagedBean(name = "navBean")
 @SessionScoped
 public class NavBean {

private String activePage = "firstAjax";

public String getActivePage() {
    return activePage;
}

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

public void next() {
    System.out.println("next in " + activePage);
    this.setActivePage("lastAjax");
    System.out.println("next out " + activePage);
}

public void back() {
    System.out.println("back in " + activePage);
    this.setActivePage("firstAjax");
    System.out.println("back out " + activePage);
}
}

the firstAjax.xhtml and the lastAjax.xhtml is nearly the same

<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 first</h2>
</h:form>
</ui:composition>

perissf · Accepted Answer · 2014-11-26T21:50:39.857

Your page is not working because PrimeFaces has its own ajax engine. You have to use it when using p:commandButton. You don't need to use p:ajax tag, because p:commandButton has ajax behaviour activated by default, just use the update attribute (equivalent to the render attribute of f:ajax component):

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

If you want to stick to plain jsf use this instead (it looks much more like the example by BalusC you mentioned):

<h:form>
    <f:ajax render=":content" >
        <h:commandButton value="next" action="#{navBean.next}" />            
        <h:commandButton value="back" action="#{navBean.back}" />
    </f:ajax>
</h:form>

As a final note, it must be said that p:ajax tag (at least in PrimeFaces 4.0) doesn't support the syntax we are using here, outside the p:commandButton components, because it's not able to determine the event attribute and therefore it throws: <p:ajax> Event attribute could not be determined: null

Partial Page Rendering (primefaces) need two times click before changing

1 Answers1