How do multiple components target the same "f:ajax render "target?

Question

I recently tried to write some simple JSF page using AJAX. It's basically just two numeric fields which are then added together in another

<head>
    <style>
        .standardText {
            font-family: Arial, serif;
        }
        .result {
            font-family: Arial, serif;
            border-top: solid blue 5px;
            text-align: right;
            width: 30%;
        }
        .input-field {
            font-family: Arial, serif;
            font-weight: bold;
            margin-left: 5px;
        }
    </style>
</head>
<h:body>
    <h2 class="input-field">Type in your arguments and the glorious machine will tell you the <br/>
    <span style="color: slateblue; text-overline: true;">TRUTH</span>!!</h2>
    <h:form>
        <p></p>
            <h:outputLabel value="Your first argument" for="arg"/>
            <h:inputText value="#{test.arg}" id="arg">
                <f:ajax event="change" render="result"/>
            </h:inputText>
        <p></p>
            <h:outputLabel value="Your second argument"
                           styleClass="standardText" for="arg2"/>
            <h:inputText value="#{test.arg2}" id="arg2">
                <f:ajax event="change" render="result"/>
            </h:inputText>

        <h:panelGroup layout="block">
            <h:outputText value="Your result is: #{test.result}" id="result"/>
        </h:panelGroup>
    </h:form>
</h:body>

The bean is just as simple as the page: just the three properties arg, arg2 and result (The result is calculated in the getter).

package com.jsf;

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import java.io.Serializable;

@Named("test")
@ViewScoped
public class Test implements Serializable {

private static final long serialVersionUID = 1L;

private Integer arg;

private Integer arg2;

private int result;

public int getResult() {
    result = arg + arg2;
    return result;
}

public Integer getArg() {
    return arg;
}

public void setArg(Integer arg) {
    this.arg = arg;
}

public Integer getArg2() {
    return arg2;
}

public void setArg2(Integer arg2) {
    this.arg2 = arg2;
}

}

When running the facelet and filling in a value, the result output doesn't change.

After some time of debugging, I'm guessing that two components cannot have the same render target?

I've tried to group the h:form under one f:ajax tag - without sucess.

Ideas for a solution?

Are the values getting to your backing bean? Can you out put the values? Two components should be able to have the same render item — Sam Orozco, Sep 07 '16 at 21:29
Looking at your title, the answer is 'they just can'. So maybe update the title and the real question. And debug like @SamOrozco states... are the setters called, do you see ajax events fired in the browser console. Please investigate way more yourself in the role of a developer and not an end-user — Kukeltje, Sep 07 '16 at 22:28
Please copypaste unmodified code in [mcve] flavor as instructed in http://stackoverflow.com/tags/jsf/info and don't edit afterwards. This would only introduce potential red herrings which doesn't help anybody. In the meanwhile, investigate if http://stackoverflow.com/q/2118656 doesn't already solve your problem. — BalusC, Sep 08 '16 at 07:20

score 0 · Accepted Answer · edited May 23 '17 at 12:08

For the AJAX technology to work properly, you must not use the HTML head tag but the h:head tag. Otherwise the built-in JS libraries can't be loaded into the page.

As BalusC suggested, the web browsers JS console is helpful in such cases. The message "mojarra is not defined" should appear.

See point 7 of BalusC's answer to the question commandLink/commandButton/ajax backing bean action/listener method not invoked

score -2 · Answer 2 · answered Sep 07 '16 at 22:12

-2

The result is probably updated but the input values are not submitted.

try ta add execute="@form"attribute to your f:ajax tag

answered Sep 07 '16 at 22:12

kalym4ik

108
1
10

1

That defeats part of the advantage of ajax, namely to reduce traffic, processing etc on the server. The default is `@this`, which sends the value of the specific component in which the ajax tag is nested if the event occurs. – Kukeltje Sep 07 '16 at 22:27
execute="@form" will send only 2 inputs in this case. I don't think that it will significally increase the traffic, processing etc – kalym4ik Sep 07 '16 at 22:29
1

I know, but it is still not the solution. The defaults should work to. – Kukeltje Sep 07 '16 at 22:30

How do multiple components target the same "f:ajax render "target?

2 Answers2