• 締切済み

教えてください＞＜

JavaScriptを使って XSLTに変数(key)を渡し、XMLをHTMLに変換 その結果を表示したいと思っています。 しかし、うまく表示してくれません。 XSLTをXMLに変換してHTMLするところに関しては正常に動いているので、 おそらくJavaScriptに問題があると思います。 どこがおかしいか教えていただけないでしょうか？ 以下ソース <html> <head> <title>好きな本 </title> </head> <body onLoad="load()"> <script type="text/javascript"> var xml, xslt, xslProc; function load() { // 読み込む前に空のドキュメントを生成 if(!document.all) { // ブラウザ判別 // Mozilla xml = document.implementation.createDocument("", "", null); xslt = document.implementation.createDocument("", "", null); } else { // Internet Explorer xml = new ActiveXObject("Msxml2.DOMDocument"); xml.async = false; xslt = new ActiveXObject("Msxml2.FreeThreadedDOMDocument"); xslt.async = false; } // 読み込み(*.xml,*.xsl) xml.load("xmldata.xml"); xslt.load("seiseiform.xsl"); // XSLTプロセッサにスタイルシート(*.xsl)をセット if(!document.all) { // ブラウザ判別 // Mozilla xslProc = new XSLTProcessor(); xslProc.importStylesheet(xslt); } else { // Internet Explorer var xslTemp = new ActiveXObject("Msxml2.XSLTemplate"); xslTemp.stylesheet = xslt; xslProc = xslTemp.createProcessor(); xslProc.input = xml; } } function transform(in) { // XSLTプロセッサにパラメータを与えて変換、結果はresult要素に if(!document.all) { // ブラウザ判別 // Mozilla xslProc.setParameter(null, "key", in); var fragment = xslProc.transformToFragment(xml, document); document.getElementById('result').innerHTML = ""; document.getElementById('result').appendChild(fragment); } else { // Internet Explorer xslProc.addParameter("key",in); try { xslProc.transform; document.getElementById('result').innerHTML = xslProc.output; } catch(e) { document.getElementById('result').innerHTML = e.description; } } } </script> <form> <p><input type="text" name="in" size="40"/></p> <br></br> <p><input type="submit" value="検索" onClick="transform(in.value)"/> </p> </form> <div id="result"></div> </body> </html>

みんなの回答

回答No.1

============Q3803738-1.html================ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>都道府県と都道府県庁所在地</title> <script type="text/javascript"> var xml, xslt, xslProc; function load() { // 読み込む前に空のドキュメントを生成 if(!document.all) { // ブラウザ判別 // Mozilla xml = document.implementation.createDocument("", "", null); xslt = document.implementation.createDocument("", "", null); }else { // Internet Explorer xml = new ActiveXObject("Msxml2.DOMDocument"); xml.async = false; xslt = new ActiveXObject("Msxml2.FreeThreadedDOMDocument"); xslt.async = false; } // 読み込み(*.xml,*.xsl) // ※himajin100000の個人的な都合で，ファイル名を変えている。 xml.load("Q3803738-1.xml"); xslt.load("Q3803738-1.xsl"); // XSLTプロセッサにスタイルシート(*.xsl)をセット if(!document.all) { // ブラウザ判別 // Mozilla xslProc = new XSLTProcessor(); xslProc.importStylesheet(xslt); }else{ // Internet Explorer var xslTemp = new ActiveXObject("Msxml2.XSLTemplate"); xslTemp.stylesheet = xslt; xslProc = xslTemp.createProcessor(); xslProc.input = xml; } } //※紛らわしいので引数の名前変更。色々代わっているので直すこと。 function transform(input) { // XSLTプロセッサにパラメータを与えて変換、結果はresult要素に if(!document.all) { // ブラウザ判別 // Mozilla xslProc.setParameter(null, "key", input); var fragment = xslProc.transformToFragment(xml, document); document.getElementById('result').innerHTML = ""; document.getElementById('result').appendChild(fragment); }else { // Internet Explorer xslProc.addParameter("key",input); try { xslProc.transform; document.getElementById('result').innerHTML = xslProc.output; }catch(e){ document.getElementById('result').innerHTML = e.description; } } } </script> </head> <body onload="load()"> <!-- ※form要素不要。input要素のtype属性をsubmitからbuttonに--> <!-- ※inではMinefieldが文句言うのでdocument.getElementByIdを使う それにともない，name属性からid属性に変更した。 --> <!-- ※XHTML 1.0 Strictにしたのに伴い， 属性名は全て小文字にした。 --> <!-- ※OperaやSafariでは動作しませんでした。標準規格の技術にあるかどうかすら 俺は確認していません。 しかし，Web関連技術に関して説明なく「対応していません」とされるのが大嫌いなので 一般向けサービスとしてこの仕組みを使われることを拒否します。 (自分だけで使うとかイントラネット等ならまあいいけど。) それらのブラウザへの対応を考えるなら， サーバ側で動くプログラムでXSLTを適用するのが理想的です。 --> <!-- ※W3C Markup Validatorで確認したのでおかしいところがあったらgooのせいです。 ※質問タイトルは予想できるように書いてください。今回で言えば「XSLTとECMAscriptについて」とか --> <p><input type="text" id="in" size="40"/></p> <p><input type="button" value="検索" onclick="transform(document.getElementById('in').value)"/> </p> <div id="result"></div> </body> </html> ============Q3803738-1.xml================ <?xml version="1.0" encoding="UTF-8"?> <Data xmlns="http://himajin100000.example.com/"> <Prefecture> <name>東京都</name> <PrefecturalCapital>新宿区</PrefecturalCapital> </Prefecture> <Prefecture> <name>神奈川県</name> <PrefecturalCapital>横浜市</PrefecturalCapital> </Prefecture> <Prefecture> <name>埼玉県</name> <PrefecturalCapital>さいたま市</PrefecturalCapital> </Prefecture> <Prefecture> <name>F県</name> <PrefecturalCapital>F市</PrefecturalCapital> </Prefecture> </Data> <!-- ※何かXMLやXSLTの内容が大分変わっているけど 指摘する点に変更はないので勘弁してください 押し付けてばかりで申し訳ありませんが， 名前空間なしで運用される形を好まないので今回は 名前空間をつけさせてもらいました。 --> ============Q3803738-1.xsl================ <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sample="http://himajin100000.example.com/" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="sample" > <xsl:param name="key"/> <xsl:template match="/sample:Data"> <!-- ※XHTML では確かdl要素の直下にdt,dd合わせて最低限一つ以上子に持つ必要があった と思うので厳密にはこのソースではxsl:ifで条件に一致するものがない時，文法エラーとなるから注意。 --> <dl> <xsl:apply-templates select="sample:Prefecture" /> </dl> </xsl:template> <xsl:template match="sample:Prefecture"> <xsl:if test="sample:name/text() = $key"> <dt><xsl:value-of select="sample:name" /></dt> <dd><xsl:value-of select="sample:PrefecturalCapital" /></dd> </xsl:if> </xsl:template> </xsl:stylesheet>

tkb_ht5
質問者

お礼

自分のやつでやってみたんですが、 検索ボタンを押しても動作しません。 himajin100000さんのサンプルでもやってみたんですが、 同じ状態になります。 すいません。根本的なことが分かっていないようです；；

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する