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