ShowTable of Contents
はじめに
ラジオボタングループを利用した際に、選択された値によって動的にページを書き換えることがよくあるかと思います。
その際に、Mozilla Firefox や Internet Explorer 9 以降であれば、onchange イベントを利用することで
選択された値を取得することができます。
しかし、Internet Explorer 8 以前では onchange イベントが機能しないので、
onclick イベントを利用する必要があります。
ラジオボタングループを利用した際に、それぞれのラジオボタンにラベルをつけることが一般的で、
そのラベル部分をクリックした際にも対象となるラジオボタンにチェックがつきます。
実は、その際に onclick イベントが発生するのですが、ラベル部分をクリックした際に
捕捉された際にはラジオブタンが選択状態になっていないので、正しい値を取ることができません。
以下のコードで確認できます。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:radioGroup id="radioGroup1" defaultValue="1">
<xp:selectItem itemLabel="One" itemValue="1" />
<xp:selectItem itemLabel="Two" itemValue="2" />
<xp:selectItem itemLabel="Three" itemValue="3" />
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="panel" />
</xp:radioGroup>
<xp:panel id="panel">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:return getComponent("radioGroup1").getValue();}]]></xp:this.value>
</xp:text>
</xp:panel>
</xp:view>
ラジオボタン部分をクリックした際には、正しい値が計算結果に入りますが、ラベル部分をクリックした際には以前に選択された部分の値が返ってきます。
回避策
onclick イベントにフィルタリング機能を追加し、ラベル部分がクリックされた際には部分更新を実行しないようにすることで問題を回避することができます。
フィルタ機能は onclick イベントのクライアントサイド JavaScript で実装します。
ラジオボタングループのイベントタブで onclick イベントを選択し、クライアントサイド JavaScript に以下の一行を追加します。
return thisEvent.target.tagName === "INPUT";
これで、ラベル部分がクリックされた際のイベントは無視され、その後のラジオボタンにチェックが入った際に onclick イベントが処理されるようになります。
上記のコードにフィルター機能を実装した際のコードは以下になります。
ラベル部分がクリックされた際にも、正しい値が返ってくることを確認いただけます。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:radioGroup id="radioGroup1" defaultValue="1">
<xp:selectItem itemLabel="One" itemValue="1" />
<xp:selectItem itemLabel="Two" itemValue="2" />
<xp:selectItem itemLabel="Three" itemValue="3" />
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="panel">
<xp:this.script><![CDATA[return thisEvent.target.tagName === "INPUT";]]></xp:this.script>
</xp:eventHandler>
</xp:radioGroup>
<xp:panel id="panel">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:return getComponent("radioGroup1").getValue();}]]></xp:this.value>
</xp:text>
</xp:panel>
</xp:view>