カテゴリー : jQuery

jQuery UIダイアログで input から val() で値が取り出せない

はい、今日はこれで半日以上潰してしまいました… orz
発端は、Ajaxを利用してHTMLで戻ってきたフォームをダイアログウィンドウへ表示し、入力を取得しようとしたけどデータが取得できなかった、というものだ。

Ajaxは利用せず、それを簡略化したソースです。

<html>
<head>
<title>Test Dialog</title>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
get_name = function() {
	var md = $("<div><input id=\"name\" type=\"text\" value=\"\" /></div>");
	md.dialog(
	{
		modal: true,
		height: 100,
		width: 200,
		title: 'Input Dialog',
		resizable: false,
		buttons: {
			"OK": function() {
				alert($("#name").val());
				$(this).dialog('close');
			},
			"CANCEL": function() {
				$(this).dialog('close');
			},
		}
	});
}
</script>
</head>
<body>
<h1>UI Dialog Test</h1>
<input type="button" value="Fail Open" onclick="get_name()" /><br />
</body>
</html>

これは「Fail Open」ボタンを押すとダイアログが開き、入力域に文字を入れて「OK」をクリックすると、次のように入力した文字をアラート表示する、というものだ。

ところが続いて同じことをしても input にタイプした内容が表示されず、前回の値がそのまま表示されるのだ。

これだと、繰り返し利用することができない。頭が痛い~。

しかし、jQuery UI のデモサイトでは、同じようなことはおきていない。違うバージョンなどいろいろ試して見て、ようやくどうすればそうならずに利用できるか分かった。そのソースが次だ。

<html>
<head>
<title>Test Dialog</title>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
get_good_name = function() {
	$("#input_dialog").dialog(
	{
		modal: true,
		height: 100,
		width: 200,
		title: 'Input Dialog',
		resizable: false,
		buttons: {
			"OK": function() {
				alert($("#good_name").val());
				$(this).dialog('close');
			},
			"CANCEL": function() {
				$(this).dialog('close');
			},
		}
	});
}
</script>
</head>
<body>
<h1>UI Dialog Test</h1>
<input type="button" value="Good Open" onclick="get_good_name()" />

<div id="input_dialog" style="display:none">
	<div>
		<input type="text" id="good_name" val="" />
	</div>
</div>

</body>
</html>

見ての通り、違いは「<input type=”text” />」を予めHTMLソースに忍ばせておくか、JavaScriptで追加するかだ。今のところ動的に追加したtextタイプでは、入力された値は正常に取り出せないようだ。

ただし同じ動的なinputでもradioタイプでは、valueで指定した値をval()で正しく取得できた。

jQuery 1.4.2 jQuery UI 1.8.5

吹き出しを表示するツールチップ

ブログの記事や、自分の場合では Webアプリケーションなどで、その言葉やカラムが何を意味するのか説明を加えたいときがある。プログラムで一覧表など作っている場合は、特にそのID(数字)がどのテーブルデータにリンクしているのか、リンク先データの名前を示したい。が、画面サイズは限りがあるので、一覧表に何でもかんでも掲載できない。

そのような制約がある中で、マウスカーソルをその上に置くと吹き出しとなって表示する、ツールチップと呼ばれる機能が重宝する。情報量が多い場合は Ajax を利用する方法もあるが、そこまでする必要がない場合はツールチップが役に立つ。

で、何か気のきいた jQuery プラグインを利用してその紹介記事を、と思ったのだ。が、試しているうちにツールチップの表示は、どうやらブラウザがデフォルトでその機能を有しているのではないか?という事に思い当った。

と言うのも、HTML タグに title 属性を追加することで、div のようなブロックタグでも、span のようなインラインタグでもツールチップを表示するからである。これは、HTML では一般的なのだろうか?

お恥ずかしい事に、title 属性をあまり意識して使っていなかった。これからは是非利用させていただこう。

あなたのブラウザで、上の太字の「ツールチップ」にマウスカーソルを置いて説明文が表示されるか、試してみて下さい。

ブラウザで位置情報を取得するGeolocation APIを使ってみる

W3Cから、ブラウザで位置情報を取得する Geolocation API 仕様書の草案が公開されている。

どうやら JavaScript を使って、 GPS 機能があるデバイスから位置情報が取り出せる仕様のようだ。GPS 機能が無い場合は、IPアドレス、RFID、WiFI や Bluetooth MAC アドレス、GSM/CDMA セル ID などから推定された情報を戻すとの事。この機能を JavaScript の「navigator.geolocation」オブジェクトとして利用できるらしい。

以下、試した内容の備忘録です。Firefox 3.6.8、Chrome 5.0.375.126 で動作しました。IE8はNG。

先ずは位置情報の取得から。プログラムは簡単です。

<html>
<head>
<title>Test Geolocation API</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.4.2");
</script>
<script type="text/javascript">
$(document).ready(function() {
	var showMap = function(position) {
		// Show a map centered at (position.coords.latitude, position.coords.longitude).
		alert("緯度:" + position.coords.latitude + " 経度:" + position.coords.longitude);
	}

	// One-shot position request.
	navigator.geolocation.getCurrentPosition(showMap);
});
</script>
</head>
<body>
<h1>Test Geolocation API</h1>
</body>
</html>

マウスをソース上に置くと右上にアイコンメニューが表示されるので、コピーしてテキストエディタで test.html として保存、そのままブラウザで指定すれば実行できます。ブラウザを開くと位置情報の許可を求めてくるので許可すると、しばらくしてから位置情報が戻ってくる。

次のボタンで試せます(Firefoxだと表示まで5,6秒時間が掛ります)。
※ ライブラリ内部でエラーが発生して動作しない場合がありました。無線LANルータが原因?

位置情報が取得できるなら Google マップで現在地を表示するなど、アプリケーションへの活用もいろいろできそう。以下戻ってきた位置をマップ上に表示するプログラムです。リンクは、The Google Maps Javascript API V3 のドキュメントです。

<html>
<head>
<title>Test Geolocation API</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.4.2");
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=ja"></script>
<script type="text/javascript">
$(document).ready(function() {
	var showMap = function(position) {
		var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
		var options = {
			zoom: 16,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		var map = new google.maps.Map($("#map_canvas").get(0), options);
		var marker = new google.maps.Marker({
						map: map,
						position: latlng
					});
	}

	$("#abtn").click(function() {
		navigator.geolocation.getCurrentPosition(showMap);
		return false;
	});
});
</script>
</head>
<body>
<h1>Test Geolocation API</h1>
<p><input type="button" id="abtn" value="現在地表示" /></p>
<div id="map_canvas" style="width:480px; height:400px;"></div>
</body>
</html>

以下のボタンを押すと、実際に地図と現在地を表示します。

いかがでしたか?

iPhone 3GS 4.0.2 の Safari で、このページで地図を表示する事ができた。が、これはどこを表示しているのだろう?

JavaScriptのreplaceで正規表現と変数利用

CMS(WordPress)の管理画面上で、フォームの項目をユーザーがボタンを押して追加する動作を、jQueryを使って「DOMをコピーしよう」と考えたのは名案だと思った。ところがタグに付けられた id 属性や name 属性が重複するため、支障がある事に気付いた。この記事は、それを書き換えるのに利用した JavaScript の replace と正規表現による置き換えや、Windows 操作の Tips 備忘録です。

replace の引数、文字列と正規表現

date = "2010-08-20";
when = date.replace("-", "/");
alert(when);

を実行すると、「2010/08-20」と置き換えられる。そこで

when = date.replace(/-/g, "/");

と、修飾子gを使って正規表現で実行すれば、希望通り「2010/08/20」が得られる。

それでは、「-」を変数 c とした場合、どうすればいいのだろう。

date = "2010-08-20";
c = "-";
when = date.replace(eval("/"+c+"/g"), "/");
alert(when);

ところで日付データが「2010/08/20」で、URIエンコードで「2010%2F08%2F20」としたいときは?

date = "2010/08/20";
c = "\\/";
uriwhen = date.replace(eval("/"+c+"/g"), "%2F");
alert(uriwhen);

エスケープする文字の前にエスケープ文字をエスケープすれば、即ち「¥¥」と重ねておけばいいようだ。

alert 表示が画面サイズになったときの終了方法

変数の内容を確認するため alert() 表示したら、うっかり画面一杯表示されてしまい困ってしまった。
alert表示が画面一杯、あらら

[alt]+[ctrl]+[del]でタスクを終了すると、ブラウザの終了で他に開いているページまで(T_T)ノシ てなことになる。

カレントウィンドウの終了は、[alt]+[space]でウィンドウタイトルのメニューを開いて終了すればよい。

jQuery 1.4 のリリースと google.load()

jQeury のようなメジャーな JavaScript ライブラリを Web で利用する際、当方もご多分にもれず、Google AJAX Libraries API を利用させてもらい始めた。jQuery 1.4 がリリースされ、Google では既に利用できるようになっている。

Google AJAX Libraries API を利用すれば、jQuery が新しくなるたびに自分のサイトにコピーして HTML を書き直ししなくても、「google.load()」を利用してGoogle サイトから常に最新のものを読み込ませるように指定できる。利用の仕方は簡単で、「http://www.google.com/jsapi」の JavaScript コードを読み込み、「google.load(ライブラリ名、バージョン)」を実行するだけだ。google.load() の使い方は、デベロッパーガイドの最初に記述されている。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1')</script>

バージョンを「1」としたのは、「1.x.x」のバージョンで最新のものを自動的に読み込むように指示した例だ。「1.3」とすると「1.3.2」と、マイナーで最新のものを読み込む。

さてそのページには、登録されているメジャーなライブラリの一覧が表示されている。日本語文は機械翻訳されているのか、言い回しが分かり難いのはご愛敬でしょう(^_^)。バージョン番号などは、英語ページの方で最新版を確認した方がいいようだ。

またライブラリのロードを、パスで直接指定できるようになっている。jQuery 1.4 なら次のように指定できる。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js></script>

さて Google では、利用できる AJAX API もマップやライブラリのロードだけに留まらず、Web ページに組み込める多くのリッチコンテンツが紹介ページに掲載されている。

Web プログラマーをやるのも、ネタが多くて食傷気味の今日この頃だ(;´д`)。