p:commandButton refreshes entire page instead of partially whereas f:ajax works fine

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?

What do you mean with page is refreshed? Reloaded? Or do you loose the scope? — tak3shi, Apr 08 '16 at 12:11
Stop using `prependId="false"`, just never use it, it's an unthoughtful leftover from JSF 1.2. — BalusC, Apr 08 '16 at 12:15

tak3shi · Answer 1 · 2016-04-08T12:15:03.830

1

You are not calling any valid ajax action:

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

edited Apr 08 '16 at 12:15

answered Apr 08 '16 at 12:03

tak3shi

2,305
1
20
33

If this is the answer, it still is strange... that one works and the other does not... – Kukeltje Apr 08 '16 at 14:41
removing the action="index" on the button just causes the button to do nothing. index is the xhtml file with the content, which should update. – user1882509 Apr 09 '16 at 09:51
With an p:commandButton you are executing an ajax request by default. No action is required for this. You have selected to update newsContent. If nothing happens, that you should check if you need to call some code with an actionListener to prepare the change you want see. – tak3shi Apr 09 '16 at 18:34
An Ajax request does not need any page argument, since it does not load a new page, it only refreshs the specified partial content that you have selected in the update argument 'newsContent'. – tak3shi Apr 09 '16 at 18:42
@Kukeltje Yes, you are right. But without the action there should not be a page refresh, it makes no sense for an ajax request. If that does not help, i would check if the required data has been sent and try to change h:panelGroup to p:outputPanel, because that makes guaranted no problems when updating. – tak3shi Apr 09 '16 at 18:47

score 0 · Accepted Answer · answered Apr 10 '16 at 16:35

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.

p:commandButton refreshes entire page instead of partially whereas f:ajax works fine

2 Answers2

Linked