Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JSF action from onChange

I'm trying to set up a data table with JSF that has boxes for row total that will sum the row total onChange of any box in the row. the row looks like:

<tr id="input_row_1">
<td id="mondayInput1">
    <h:inputText id="monday1" size="4" value="#{timesheet.monday1}" required="false" />
    <!-- <input name="monday1" class="smallInput" type="number" size="2" maxlength="4" min="0"/> -->
</td>
<td id="tuesdayInput1">
    <h:inputText id="tuesday1" size="4" value="#{timesheet.tuesday1}" required="false" />
    <!--<input name="tuesday1" class="smallInput" type="number" size="2" maxlength="4" min="0"/> -->
</td>
<td id="wednesdayInput1">
    <h:inputText id="wednesday1" size="4" value="#{timesheet.wednesday1}" required="false" />
    <!--<input name="wednesday1" class="smallInput" type="number" size="2" maxlength="4" min="0"/> -->
</td>
<td id="thursdayInput1">
    <h:inputText id="thursday1" size="4" value="#{timesheet.thursday1}" required="false" />
    <!--<input name="thursday1" class="smallInput" type="number" size="2" maxlength="4" min="0"/> -->
</td>
<td id="fridayInput1">
    <h:inputText id="friday1" size="4" value="#{timesheet.friday1}" required="false" />
    <!--<input name="friday1" class="smallInput" type="number" size="2" maxlength="4" min="0"/> -->
</td>
<td id="saturdayInput1">
    <h:inputText id="saturday1" size="4" value="#{timesheet.saturday1}" required="false" />
    <!--<input name="saturday1" class="smallInput" type="number" size="2" maxlength="4" min="0"/> -->
</td>
<td id="sundayInput1">
    <h:inputText id="sunday1" size="4" value="#{timesheet.sunday1}" required="false" />
    <!--<input name="sunday1" class="smallInput" type="number" size="2" maxlength="4" min="0"/> -->
</td>
<td>
    <h:inputText id="total1" size="4" value="#{timesheet.total1}" required="false" />
    <!-- <input name="total1" id="total1" type="text" size="5" readonly="readonly" /> -->
</td>

so I first tried to add onChange="#{timesheet.setTotal1}" to the day entries but the onChange event calls javascript, not java / JSF code. Can someone help get the total to update?

EDIT: I have accepted BalusC's answer but needed to also include the event attribute to the <f:ajax> tag to get it to work, like so

<h:inputText id="friday1" size="4" value="#{timesheet.friday1}" maxlength="4" required="false" >
    <f:ajax event="change" render="total1" listener="#{timesheet.updateTotal1}" />
</h:inputText>
like image 528
Jake Long Avatar asked Aug 02 '12 17:08

Jake Long


1 Answers

Indeed, the onchange attribute is just treated as a plain text HTML attribute which should represent a JavaScript onchange handler function. This is not different from in "plain vanilla" HTML. Any EL expressions in that attribute will just be treated as value expressions. See also the tag documentation.

Based on your question history, you're using JSF 2.x (please explicitly mention the exact JSF impl/version in future questions as many things are done differently in JSF 2.x as compared to JSF 1.x). So, just using the new JSF 2.0 <f:ajax> tag should do it.

<h:inputText ...>
    <f:ajax listener="#{timesheet.changeTotal1}" render="idOfTotalComponent" />
</h:inputText>

...

<h:outputText id="idOfTotalComponent" value="#{timesheet.total1}" />

with

public void changeTotal1(AjaxBehaviorEvent event) {
    total1 = ...;
}
like image 118
BalusC Avatar answered Sep 27 '22 21:09

BalusC