3

2 つのラジオ ボタンと 1 つのテキストエリアがあります。ラジオ ボタンの 1 つをクリックしたときに Textarea の CSS を変更したい。「はい」をクリックするとテキストエリアが有効になり、「いいえ」をクリックすると無効になります。
両方の要素のコードは次のとおりです。

<h:outputLabel for="data" value="Change Data" />
<p:selectOneRadio id="data" required="true" value="No">
   <f:selectItem itemValue="Yes" itemLabel="Yes" />
   <f:selectItem itemValue="No" itemLabel="No" />
</p:selectOneRadio>

<h:outputLabel for="yesdata" value="Details to change data" />
<p:inputTextarea id="yesdata" />

まず、jQueryclick()イベントを追加しました。しかし、問題は、これを<ui:define name="scripts">領域に追加すると、コードが本体の前に表示されるため、これが機能しないことです。そこで、両方のselectItemにトリガー
を追加しようとし、css を変更するメソッドを追加して、それをスクリプト領域に追加しました。しかし、レンダリングされたソースコードを見ると、ラジオ ボタンに onClick が追加されていません。onClick

では、ラジオ ボタンに対して jQuery アクションを実行するにはどうすればよいでしょうか。

4

1 に答える 1

6

まず、jQuery の click() イベントを追加しました。しかし、問題は、これを<ui:define name="scripts">領域に追加すると、コードが本体の前に表示されるため、これが機能しないことです。

に追加target="body"するだけで、 の直前<h:outputScript>で終わるようになり</body>ます。

<h:outputScript ... target="body" />

これは、含まれている両方のスクリプトで機能します (グッド プラクティス)。

<h:outputScript name="onload.js" target="body" />

タグ本体に直接記述されたスクリプト (悪い習慣):

<h:outputScript target="body">
    alert('Hi');
</h:outputScript>

そこで、selectItem の両方に onClick トリガーを追加しようとし、css を変更するメソッドを追加して、scripts-area に追加しました。しかし、レンダリングされたソースコードを見ると、ラジオ ボタンに onClick が追加されていません。

2 つの問題があります。まず、それは であり、 でonclickはありませんonClick。かなり前のonClick1998 年以降の HTML 4.01 以降は無効です。HTML/JSF/etc を学習するために使用しているリソースの年齢に注意を払い、それらが 1 ～ 3 年以上経過していないことを確認してください。それ以外の場合は、非常に注意してください。

第二に、<f:selectItem>タグのドキュメントonclickには属性が記載されていません。したがって、なぜあなたがそれをあそこに置こうとしたのかは、私にはわかりません。<p:selectOneRadio>タグのドキュメントにonchange属性がリストされています。あちらではもっと運がいいはずです。

<p:selectOneRadio ... onchange="alert(this.value)">

ちなみに、あなたの使い方<p:selectOneRadio value>は間違っています。これは、バッキング Bean プロパティへのバインディングを表す必要があります。しかし、それは別の問題です。

具体的な問題とは関係ありませんが、JS/jQuery を必要とせずに要件を達成する簡単で「純粋な JSF」の方法は、<p:ajax>変更時に textarea コンポーネントを更新し、textarea コンポーネントのdisabled属性を条件付きでチェックするをスローすることです。ラジオボタンの選択値:

<p:selectOneRadio id="data" binding="#{yesOrNo}" required="true">
   <f:selectItem itemValue="Yes" itemLabel="Yes" />
   <f:selectItem itemValue="No" itemLabel="No" />
   <p:ajax update="yesdata" />
</p:selectOneRadio>

<p:inputTextarea id="yesdata" disabled="#{yesOrNo.value != 'Yes'}" />

この例では、「はい」が選択されていない限り、テキストエリアは無効になります。

于 2013-11-04T15:57:15.323 に答える