0

JDev 12c を使用しています。

次のようなラジオ ボタンとして機能するチェック ボックスをいくつか実装しようとしています。

http://jsfiddle.net/TTZqa/

しかし、私はそれを機能させることはできません。

すべての行に 1 つのチェック ボックスがある 3 つの行を含むフォーム t2 があります。ユーザーがチェックボックスを選択すると、それがチェックされるべきであり、別のチェックボックスがすでにチェックされている場合は、チェックされていないはずです。

チェックできるのは 1 行のみであり、送信時に 1 行だけをチェックする必要があります。

チェックボックスに次のリスナーがあります。

<af:clientListener type="click" method="sayHello"/>

私のJS関数は次のようになります。

function sayHello(event) {
          event.cancel();
          var source = event.getSource();

          var chk1 = AdfPage.PAGE.findComponentByAbsoluteId('t2:0:sbc1');
          var chk2 = AdfPage.PAGE.findComponentByAbsoluteId('t2:1:sbc1');
          var chk3 = AdfPage.PAGE.findComponentByAbsoluteId('t2:2:sbc1');

          if (source == chk1) {
              chk1.setValue(true);
              chk2.setValue(false);
              chk3.setValue(false);
          }
          else if (source == chk2) {
              chk1.setValue(false);
              chk2.setValue(true);
              chk3.setValue(false);
          }
          else if (source == chk3) {
              chk3.setValue(true);
              chk2.setValue(false);
              chk1.setValue(false);
          }
      }

チェックボックスのいずれかがクリックされたときに関数が呼び出されることはわかっていますが、すべてのボックスがチェックされていません。チェックマークが一瞬点滅するのがわかりますが、そのままではありません。

空の JavaScript 関数を呼び出すと、ユーザーは 3 つのチェック ボックスすべてをクリックすることができ、チェック マークはボックス内にとどまりますが、相互に排他的ではなく、期待どおりに動作します。

しかし、次のように関数を書くと:

function sayHello(event) {
          event.cancel();
          var source = event.getSource();
          var chk1 = AdfPage.PAGE.findComponentByAbsoluteId('t2:0:sbc1');

}

チェックマークがすぐに消えます。

「event.cancel();」を削除しようとしました。しかし、それは何の違いもありません。

見つけたコンポーネントを同じフォームの入力フィールドに置き換えて、テキストを入力することもできます。テキストは入力フィールドに表示されますが、チェック マークはチェック ボックスからすぐに消えます。

私は勉強しました:

http://technology.amis.nl/2013/05/07/adf-client-side-architecture-select-all/

ここで何が間違っていますか?

ありがとう

キム

編集:

次の非常に単純なページを作成しました。

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="untitled2.jsf" id="d1">
    <af:messages id="m1"/>
    <af:resource type="javascript">      
      function sayHello(event) {
          event.cancel();
          var source = event.getSource();
          var chk1 = AdfPage.PAGE.findComponentByAbsoluteId('sbc1');
          var chk2 = AdfPage.PAGE.findComponentByAbsoluteId('sbc2');
          var chk3 = AdfPage.PAGE.findComponentByAbsoluteId('sbc3');
          if (source == chk1) {
              chk1.setValue(true);
              chk2.setValue(false);
              chk3.setValue(false);
          }
          else if (source == chk2) {
              chk2.setValue(true);
              chk1.setValue(false);
              chk3.setValue(false);
          }
          else if (source == chk3) {
              chk3.setValue(true);
              chk2.setValue(false);
              chk1.setValue(false);
          }        
      }
    </af:resource>
    <af:form id="f1">
        <af:panelGridLayout id="pgl1">
            <af:gridRow height="100%" id="gr1">
                <af:gridCell width="100%" halign="stretch" valign="stretch" id="gc1">
                    <!-- Content -->
                    <af:selectBooleanCheckbox label="Label1" id="sbc1" clientComponent="true">
                        <af:clientListener type="click" method="sayHello"/>
                    </af:selectBooleanCheckbox>
                    <af:selectBooleanCheckbox label="Label1" id="sbc2" clientComponent="true">
                        <af:clientListener type="click" method="sayHello"/>
                    </af:selectBooleanCheckbox>
                    <af:selectBooleanCheckbox label="Label1" id="sbc3" clientComponent="true">
                        <af:clientListener type="click" method="sayHello"/>
                    </af:selectBooleanCheckbox>
                </af:gridCell>
            </af:gridRow>
        </af:panelGridLayout>
    </af:form>
</af:document>

そして、まったく同じ奇妙な動作が見られます...チェックボックスを選択できないようです。チェックマークが消えるだけです。

入力はありますか?私はここで立ち往生しています。

/ キム

4

1 に答える 1

0

JavaScript 関数を次のようなものに置き換えてみてください。

<af:resource type="javascript">      
  function sayHello(event) {
      var source = event.getSource();
      var chk1 = source.findComponent('sbc1');
      var chk2 = source.findComponent('sbc2');
      var chk3 = source.findComponent('sbc3');
      if (source.getId() == chk1.getId()) {
          chk1.setValue(true);
          chk2.setValue(false);
          chk3.setValue(false);
      }
      else if (source.getId() == chk2.getId()) {
          chk2.setValue(true);
          chk1.setValue(false);
          chk3.setValue(false);
      }
      else if (source.getId() == chk3.getId()) {
          chk3.setValue(true);
          chk2.setValue(false);
          chk1.setValue(false);
      }        
      event.cancel();
  }
</af:resource>
于 2013-09-29T22:39:45.413 に答える