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>
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 = ...;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With