Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Notes and Domino Application Development wiki
  • All Wikis
  • All Forums
  • THIS WIKI IS READ-ONLY. Learn more...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > 日本語 - Japanese > ラジオボタングループで onclick イベントを利用する
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileIBM contributorAtsushi Sato
Contribution Summary:
  • Articles authored: 42
  • Articles edited: 2
  • Comments Posted: 0

Recent articles by this author

XPages アプリケーションで Embedded Experience メールを実現する

XPages アプリケーションを Embedded Experience メールで利用する際の実現方法の解説です。

Embedded Experience メールを試す

IBM NotesDomino 9.0 Social Edtion で XPages を利用した Embedded Experience メールの実現方法です。

How to use OpenSocial Gadgets in IBM Notes

IBM Notes 9.0 enables you to use OpenSocial Gadgets on our business. This document describes how to use OpenSocial Gadgets in IBM Notes 9.0.

IBM iNotes で OpenSocial Gadgets を利用する

IBM iNotes で OpenSocial Gadgets を利用する際の設定方法です。

IBM Notes で OpenSocial Gadgets を利用する

IBM NotesDomino 9.0 Social Edition から利用可能になった OpenSocial Gagdtes を利用する際の設定方法です。
Community articleラジオボタングループで onclick イベントを利用する
Added by IBM contributorAtsushi Sato on April 2, 2012 | Version 1
  • Actions Show Menu▼
Rate this article 1 starsRate this article 2 starsRate this article 3 starsRate this article 4 starsRate this article 5 stars
expanded Abstract
collapsed Abstract
ラジオボタングループで onclick イベントを利用したロジックを実装する際に注意点です
Tags: XPages RadioButtonGroup EventHandler
ShowTable of Contents
HideTable of Contents
  • 1 はじめに
  • 2 回避策

はじめに


ラジオボタングループを利用した際に、選択された値によって動的にページを書き換えることがよくあるかと思います。
その際に、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>

  • Actions Show Menu▼


expanded Attachments (0)
collapsed Attachments (0)
Edit the article to add or modify attachments.
expanded Versions (1)
collapsed Versions (1)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (1)Apr 2, 2012, 11:51:59 AMAtsushi Sato  IBM contributor
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • FacebookIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use