Ajax Request reloads hole body and not the specified element

Question

The response of my AJAX-request delivers the whole body, so every element/script gets reloaded. I cant figure out why. The only part which needs a reload is content.
I'm using JSF2.3 and Wildfly17.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
>

<h:head>

</h:head>

<h:body>
        <h:form>
            <f:ajax render="content">
            <h:commandLink value="#{msg['menu.1']}" action="#{page1.getLink()}"/>
            <h:commandLink value="#{msg['menu.2']}" action="#{page2.getLink()}"/>
            <h:commandLink value="#{msg['menu.3']}" action="#{page3.getLink()}"/>
            </f:ajax>
            <h:commandLink value="#{msg['menu.logout']}" action="#{homeBean.logOut()}"/>
        </h:form>



            <ui:insert id="content" name="content" >
                <!--<ui:include src="/template/common/commonContent.xhtml" />-->
            </ui:insert>



</h:body>
</html>

EDIT: It looks like this:

EDIT2:
The response after pressing one of the commandLinks

<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="javax.faces.ViewRoot"><![CDATA[<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"><script type="text/javascript" src="/bwa/javax.faces.resource/jsf.js.xhtml;jsessionid=2o_BGXk3sRokUbdd2ta2TO_Sl2u-pPduIiijrwtW.pcwer1819?ln=javax.faces"></script></head><body onload="startTime()">
<form id="j_idt4" name="j_idt4" method="post" action="/bwa/user/textSearch.xhtml;jsessionid=2o_BGXk3sRokUbdd2ta2TO_Sl2u-pPduIiijrwtW.pcwer1819" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt4" value="j_idt4" />
<a id="j_idt4:j_idt5" href="#" onclick="mojarra.ab(this,event,'action',0,'content');return false">Home</a><a id="j_idt4:j_idt6" href="#" onclick="mojarra.ab(this,event,'action',0,'content');return false">Quellcode durchsuchen</a><a id="j_idt4:j_idt7" href="#" onclick="mojarra.ab(this,event,'action',0,'content');return false">Top1500</a><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt4'),{'j_idt4:j_idt8':'j_idt4:j_idt8'},'');return false">Ausloggen</a>
</form>

    <h2>Suche in Quellcode</h2>
    <br />
<form id="j_idt10" name="j_idt10" method="post" action="/bwa/user/textSearch.xhtml;jsessionid=2o_BGXk3sRokUbdd2ta2TO_Sl2u-pPduIiijrwtW.pcwer1819" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt10" value="j_idt10" />

    <table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" name="j_idt10:j_idt12" />
        </td>
        <td><input type="submit" name="j_idt10:j_idt14" value="Suchen" />

        </td>
    </tr>
</table>
</form></body>
</html>]]></update><update id="j_id1:javax.faces.ViewState:0"><![CDATA[2371578821549273726:500402066268747694]]></update></changes></partial-response>

Request-header:

Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Faces-Request: partial/ajax
Content-type: application/x-www-form-urlencoded;charset=UTF-8
Content-Length: 304
Connection: keep-alive
Referer: http://localhost:8080/bwa/login.xhtml;jsessionid=2o_BGXk3sRokUbdd2ta2TO_Sl2u-pPduIiijrwtW.pcwer1819

Request-body

j_idt4=j_idt4&javax.faces.ViewState=2371578821549273726%3A500402066268747694&javax.faces.source=j_idt4%3Aj_idt6&javax.faces.partial.event=click&javax.faces.partial.execute=j_idt4%3Aj_idt6%20j_idt4%3Aj_idt6&javax.faces.partial.render=content&javax.faces.behavior.event=action&javax.faces.partial.ajax=true

So it works if you remove the header, content and footer divs? And the outputscripts? ? and the timer and the css? Just use the buttons in your plain xhtml without any other things? — Kukeltje, Oct 11 '19 at 06:47
loading the new content works, but it looks like more then just the new content was loaded. The other elements look/feel like their were reset. — Bashdi, Oct 11 '19 at 07:01
Kukeltje is asking you to nerrow things down to a [mcve] by removing every fragment of code not relevant to reproduce your issue. Chances are good you find the issue your self by doing so. If not you help others help you enabling them to try things out. — Selaron, Oct 11 '19 at 07:13
Btw. your ajax seemes to execute `content` only. It does not execute the command link clicked on and their action. — Selaron, Oct 11 '19 at 07:15
execute wasnt intended to be there. Added a gif of my problem. — Bashdi, Oct 11 '19 at 07:38
I'm getting the hole body as a response. I removed everything, excluding the content which needs to be change and the commandlinks. — Bashdi, Oct 11 '19 at 07:50
Show the HTTP request and response payload which you saw in the HTTP traffic monitor. — BalusC, Oct 11 '19 at 09:57
`` seemes to confirm the symptoms that the entire view is to be updated. But what does the request sent to the server tell? — Selaron, Oct 11 '19 at 10:10
Indeed. HTTP request payload is also relevant (headers, parameters, etc). You only posted the response body. This way we can tell among others if the cause of your problem is located in your XHTML source code, or in the Java source code. Then we can better nail down the root cause. — BalusC, Oct 11 '19 at 10:15
I added request-header and request-body. Is this the whole payload? — Bashdi, Oct 14 '19 at 05:20

score 2 · Accepted Answer · edited Oct 14 '19 at 13:41

The problem was that the action of the commandLinks returned a value and this overwrites the expected behavior with ajax. The solution is to set the a page variable with the url:

<h:form>
            <f:ajax render="content">
            <h:commandLink value="#{msg['menu.1']}" action="#{sessionData.setPage('/user/1.xhtml')}"/>
            <h:commandLink value="#{msg['menu.2']}" action="#{sessionData.setPage('/user/2.xhtml')}"/>
            <h:commandLink value="#{msg['menu.3']}" action="#{sessionData.setPage('/user/3.xhtml')}"/>
            </f:ajax>
            <h:commandLink value="#{msg['menu.logout']}" action="#{homeBean.logOut()}"/>
</h:form>

And later use this variable to load the page:

<h:panelGroup layout="block" id="content">
        <ui:include src="#{sessionData.page}" />
</h:panelGroup>

I also replaced my <div> with <h:panelGroup layout="block"> because JSF isn't able to locate it and the changes were not rendered.

See also

Ajax Request reloads hole body and not the specified element

1 Answers1