p:commandButton refreshes entire page instead of p

Question

I try to update a part of the page on button click. Right now, I have the following :

template.xhtml

    <h:form prependId="false">

        <h:commandButton value="NEWS" action="news">
            <f:ajax render="newsContent"></f:ajax>
        </h:commandButton>

        <h:panelGroup layout="block" id="newsContent">
            <ui:insert name="newsContent">
                <ui:include src="/WEB-INF/partials/news/news.xhtml"/>
            </ui:insert>
        </h:panelGroup>

    </h:form>

/WEB-INF/partials/news/news.xhtml

<h:commandLink action="newsdetails">
    <f:ajax render="newsContent" />
</h:commandLlink>

newsdetails.xhtml

 <h:commandButton value="INDEX" action="index">
     <f:ajax render="newsContent" />
 </h:commandButton>

Right now its working fine, but if I replace the <h:commandbutton> with something like

<p:commandButton value="INDEX" action="index" update="newsContent"/>

Then the content is updated but the page is refreshed. Any thoughts what I am doing wrong here?

Answer 1

I solved it finally.

I used an actionListener on my Button.

<p:commandLink actionListener="#{news.setCurrent(n)}" update="newsContent" />

The source of the include is now read from a Bean:

<h:panelGroup layout="block" id="newsContent">
    <ui:insert name="newsContent">
        <ui:include src="#{news.page}"/>
    </ui:insert>
</h:panelGroup>

And the getter for the page looks something like:

public String getPage() {
    if(current == null){
        return "/WEB-INF/partials/news/news.xhtml";
    }
    return "/WEB-INF/partials/news/details.xhtml";
}

On Pageload the currentObject is still null so the news.xhtml is shown. After the click the current is set to an Object and the page is updated to the details page. All without a reload of the page.

Answer 2

You are not calling any valid ajax action:

remove action="index" to avoid reloading the index page.