環境はIE、WindowsXP。
どうもAJAXで、読んできた内容をdocument.write()させると、
（いや、それ自体良くないという話も
１つ、
２つあるが、まあ、それは置いておいて）
$(function(){
// ここの中が、通らない！
});
みたい。つまり、JQueryのdocument.ready()が通らない。
この下に、functionとか書くと、そこは通る。
このとき、上記の通らない部分を通す方法（対策）２つ
■まず、事例（御題）
たとえば、以下のdatepickerを表示するプログラムを実行すると
<!doctype html>
<html>
<head>
<title>Datepicker</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$( "#datepicker" ).datepicker({
dateFormat: "yy/mm/dd"
});
});
function getdate()
{
val = $( "#datepicker" ).val();
alert(val);
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
<BUTTON onclick="getdate()">date</BUTTON>
</body>
</html>
|
のように、当然のことながら、そこにカーソルを入れれば、
datepickerが出る。
ところが、以下のAJAXを使ったプログラム
<HTML>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
$("#bt1").click(function () {
$.ajax({
type: "POST",
url: "date.htm",
dataType:"html",
success: function(msg){
document.write(msg);
}
});
});
});
</script>
</head>
<body>
<BUTTON id="bt1">AJAX</BUTTON>
</body>
</html>
|
を、（「AJAX」ボタンをクリックして）実行し、
AJAXから、上記プログラムを呼び出すと・・・
わかりにくいが、カーソルをテキストエリアにいれても、
datepickerにならない。
つまり、datepickerの設定をしている、
$(function(){
の部分、いいかえると、document.readyは通らないように見える。
一方、functionの部分は、「date」ボタンをクリックすると
のように表示されるので、プログラムは読まれているはず。
■原因らしきこと・・・？
ということは、document.write()では、document.ready
の状態（に対応するイベント）が起きないということ？
■対策１：外部参照させたら、なぜかうまく行った・・・
これは、偶然うまく行ったことで・・・
（対策２を紹介しようとしたら、
いや、これで出来ますよ！といわれて、
本当に出来たことなので、紹介）
（１）．まず、ajaxの呼び出し側で、
document.open(),document.close()をして、
ちゃんと、documentを開いて、そこに書かせるようにする。
<HTML>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
$("#bt1").click(function () {
$.ajax({
type: "POST",
url: "date1.htm",
dataType:"html",
success: function(msg){
document.open();
document.write(msg);
document.close();
}
});
});
});
</script>
</head>
<body>
<BUTTON id="bt1">AJAX</BUTTON>
</body>
</html>
|
（赤字が主要な変更点。青字は、都合上変更した点）
（２）そして、呼ばれるほう(data1.htm)は、
document.ready部分を、外部ファイルに追いやる。
以下のとおり
<!doctype html>
<html>
<head>
<title>Datepicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="datescript.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
function getdate()
{
val = $( "#datepicker" ).val();
alert(val);
}
</script>
</head>
<body>
<p>Date1: <input type="text" id="datepicker" /></p>
<BUTTON onclick="getdate()">date</BUTTON>
</body>
</html>
|
$(function(){
の部分が抜けて、そのかわり、datescript.jsを呼び出している。
（３）document.ready部分を別ファイルに記述
この別ファイル、datescript.jsの内容は、以下のとおり。
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy/mm/dd"
});
});
|
こうすると、なぜか動く。
（動作結果は、上記のイメージと同じく、
datepickerが出るだけなので、省略）
■対策２：onloadで読み込む
対策１は、外部ファイルにしないといけないため、
動的に生成する場合に問題があるかも・・・
というか、はじめに、こっちのほうを思いついて、
これを紹介しようと思ったんだけど・・・
（１）．まず、ajaxの呼び出し側で、
document.open(),document.close()をして、
ちゃんと、documentを開いて、そこに書かせるようにする。
（対策１とここまでは同じ）
<HTML>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
$("#bt1").click(function () {
$.ajax({
type: "POST",
url: "date2.htm",
dataType:"html",
success: function(msg){
document.open();
document.write(msg);
document.close();
}
});
});
});
</script>
</head>
<body>
<BUTTON id="bt1">AJAX</BUTTON>
</body>
</html>
|
（赤字が主要な変更点。青字は、都合上変更した点）
（２）そして、呼ばれるほう(data2.htm)は、
$(functon()
部分を、関数にしてしまい、その関数をonloadで読み込む
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
function syoki()
{
$( "#datepicker" ).datepicker({
dateFormat: "yy/mm/dd"
});
}
function getdate()
{
val = $( "#datepicker" ).val();
alert(val);
}
</script>
</head>
<body onload="syoki()" >
<p>Date2: <input type="text" id="datepicker" /></p>
<BUTTON onclick="getdate()">date</BUTTON>
</body>
</html>
|
（赤字が主要な変更点）
こうすると、動く。
（動作結果は、上記のイメージと同じく、
datepickerが出るだけなので、省略）
■対策にならない（失敗）例：表示側を変更しない
document.open();、document.close();の追加だけを行い
（つまり、AJAXの呼び出し側だけ修正し）
呼ばれる側は、何の修正もしない(data.htmのまま）と、
$(function()
の部分は、実行されない（つまり、何も変わらない）。
アクセス
トータル
ランキング
