スポンサーサイト

--/--/--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryでxmlを読み込む方法 for IE

2012/05/15

サーバーにあるxmlファイルを読み込んで、リストボックスを動的に作成するプログラムを作っていました。

とりあえずググって作ったのがこちら


<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function clickList(form) {
var index = form.select1.selectedIndex;
var str = form.select1.options[index].value;
form.text1.value = str;
}

// javascript
$(function() {
$.ajax( {
url: "DataList.xml",
type: 'GET',
success:function(data) {
$(data).find("data").each(function() {

var elem = document.createElement("option");

$(this).find("dataname").each(function() {
var $dataname = $(this);
elem.text = $dataname.text();
});

$(this).find("url").each(function() {
var $dataurl = $(this);
elem.value = $dataurl.text();
});

$("#DataList").append(elem);
});

}
});
});
</script>
</head>


<body>
<CENTER><FORM>
<SELECT NAME="select1" ONCLICK="clickList(this.form)" id="DataList" SIZE="10">
</SELECT>

<INPUT TYPE="text" NAME="text1" SIZE=20><br>

</FORM></CENTER>

</body>
</html>



xmlの中身:

<?xml version="1.0" encoding="UTF-8" ?>

<root>

<data name="1">
<url>C:/Data/Data1.dat</url>
<dataname>Data1</dataname>
</data>

<data name="2">
<url>C:/Data/Data2.dat</url>
<dataname>Data2</dataname>
</data>

<data name="3">
<url>C:/Data/Data3.dat</url>
<dataname>Data3</dataname>
</data>

</root>




しかし、これだとIEで動かないんですよね。

こっちがIEでも動くコード



<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function clickList(form) {
var index = form.select1.selectedIndex;
var str = form.select1.options[index].value;
form.text1.value = str;
}

// javascript
$(function() {
$.ajax( {
url: "DataList.xml",
type: 'GET',
success:function(data) {
var xml;
if (typeof data == "string") {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.loadXML(data);
} else {
xml = data;
}
$(xml).find("data").each(function() {


var elem = document.createElement("option");

$(this).find("dataname").each(function() {
var $dataname = $(this);
elem.appendChild(document.createTextNode($dataname.text()));
});

$(this).find("url").each(function() {
var $dataurl = $(this);
elem.value = $dataurl.text();
});

$("#DataList").append(elem);
});

}
});
});
</script>
</head>


<body>
<CENTER><FORM>
<SELECT NAME="select1" ONCLICK="clickList(this.form)" id="DataList" SIZE="10">
</SELECT>

<INPUT TYPE="text" NAME="text1" SIZE=20><br>

</FORM></CENTER>

</body>
</html>



http://burnsworth.blogspot.jp/2008/08/jqueryselectoptionie.html
http://stackoverflow.com/questions/562283/jquery-find-doesnt-return-data-in-ie-but-does-in-firefox-and-chrome

こちらのサイトを参考にしました。

appendChild云々の所はIEのバグらしいです。
xml云々の所は、IEはxmlと自動で認識してくれないらしく、わざわざ教えてあげないとダメらしいです。

IEェ・・・

コメントの投稿

非公開コメント

advertisement


プロフィール

とりにく

Author:とりにく
ゲーム好きなプログラマーやってます。

使用可能言語:C,C++,C#,WPF,JavaScript,Cuda
使用可能開発環境:VisualStudio2005-2013,Unity,CodeWarrior

リンクフリーです
相互リンクなどはこちら↓までかコメント欄にでもよろしくです。
skymail_tt@yahoo.co.jp

検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。