onChange的JSF动作 [英] JSF action from onChange

问题描述

我正在尝试使用JSF设置数据表，该表具有用于行总计的框，该框将对行中任何框的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>

所以我首先尝试将onChange="#{timesheet.setTotal1}"添加到日期条目，但是onChange事件调用javascript，而不是Java/JSF代码.有人可以帮助您更新总数吗?

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?

我已经接受BalusC的回答，但是还需要在<f:ajax>标签中包含event属性，以使其正常工作，

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>

推荐答案

实际上，onchange属性只是被视为纯文本HTML属性，该属性应表示JavaScript onchange处理函数.这与普通香草" HTML没什么不同.该属性中的任何EL表达式都将被视为值表达式.另请参见标记文档

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.

根据您的问题历史记录，您正在使用JSF 2.x(请在将来的问题中明确提及确切的JSF展示/版本，因为与JSF 1.x相比，JSF 2.x的许多处理方式有所不同).因此，只需使用新的JSF 2.0 <f:ajax>标签即可.

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}" />

使用

public void changeTotal1(AjaxBehaviorEvent event) {
    total1 = ...;
}

这篇关于onChange的JSF动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！