7

行内の任意のボックスの変更時に行の合計を合計する行合計のボックスを持つJSFを使用してデータテーブルを設定しようとしています。行は次のようになります。

<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イベントはjava/JSFコードではなくjavascriptを呼び出します。誰かが合計を更新するのを手伝ってもらえますか？

編集：私はBalusCの回答を受け入れましたが、タグを機能させるには、タグのevent属性も含める必要がありました。<f:ajax>

<h:inputText id="friday1" size="4" value="#{timesheet.friday1}" maxlength="4" required="false" >
    <f:ajax event="change" render="total1" listener="#{timesheet.updateTotal1}" />
</h:inputText>
4

1 に答える 1

8

実際、この属性は、JavaScriptハンドラー関数onchangeを表すプレーンテキストのHTML属性として扱われます。onchangeこれは、「プレーンバニラ」HTMLの場合と同じです。その属性のEL式は、値式として扱われます。タグのドキュメントも参照してください。

質問履歴に基づいて、JSF 2.xを使用しています（JSF1.xと比較してJSF2.xでは多くのことが異なる方法で行われるため、今後の質問で正確なJSF impl / versionを明示的に言及してください）。したがって、新しいJSF2.0<f:ajax>タグを使用するだけでそれを実行できます。

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

...

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

と

public void changeTotal1(AjaxBehaviorEvent event) {
    total1 = ...;
}
于 2012-08-02T18:30:30.827 に答える