- 締切済み
Ajax.Updater で受けたHTML中のスクリプトを動かしたい
Prototype.js の Ajax.Updater で受け取ったコンテンツの中で <script type="text/javascript"> .... の関数を動かしたいのですが、上手くいきません。 Ajax.Updater で受け取った下のようなHTMLをページに埋め込んで、クリックするとオブジェクトが見つかりませんと言われてしまいます。 <a href="javascript:void(intest('OK'))">テスト</a> <script type="text/javascript"> var args; function intest (args) { alert(args) } </script> どうしたら動くようになるんでしょうか？
- rshes
- お礼率0% (0/3)
- AJAX
- 回答数3
- ありがとう数17
- みんなの回答 （3）
- 専門家の回答
みんなの回答
知識が古いとコードも古いね var s=h.replace(/.*<script>|<\/script>*./gm,''); がいいかも！ ここの板は投稿数が少ないから数で勝負！^^;
以前それで困ったときがありました 過去のことを調べるのに時間がかかってしまった。 Ajaxからの戻り値をｈに代入。 そのコード部分を抽出 スクリプトのノードを作り、ヘッドに追加することで 関数を登録できます！ var h=o.responseText; var s=h.replace(/[\s|\S]*<script>|<\/script>[\s\S]*/gm,''); _scr = document.createElement( 'script' ); _scr.type = 'text/javascript'; _scr.text = s; document.getElementsByTagName( 'head' )[0].appendChild(_scr);
<a href="#" onClick=" alert('args'); "> とする もしかすればスクリプト部分を抜き出し evalに投げ込む？
関連するQ&A
- Ajaxで文字化けしてしまいます
IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると 文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。 何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function readText() { var sURL = "sample.txt?cache="+(new Date()).getTime(); new Ajax.Updater("result",sURL, { method: "get" }); } // --></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
- Ajax.Updaterでjavascriptを記述する方法
お世話になります。 prototype.jsを使って開発をしております。 Ajax.UpdaterにevalScripts: trueを設定し request.responseTextにjavascriptが記述されたものを返しているのですが javascriptに＜（小なり）、＞（大なり）があると ><に変換されてしまい、javascriptが正常に動作しません。 なければ正常に動作します。 恐らくはrequest.responseTextに返す前にPHPで $xsl = new DomDocument(); $xsl->load("hoge.xsl"); $processor = new xsltprocessor(); $processor->importStyleSheet($xsl); echo $processor->transformToXML($xml); とパースをかけていることが原因だと思うのですが 何か対処法はありませんでしょうか？ どうぞよろしくお願い致します。 xslに書いてあるjavascriptの内容 <script language="javascript" type="text/javascript"> // <![CDATA[ test = function(hoge){ if(hoge > 3){ alert("over"); } }; // ]]> </script> http://oshiete1.goo.ne.jp/kotaeru.php3?q=1875880 を参考にCDATAをscriptの中に書いたり、外に書いたりと試しましたが ダメでした。当然か。。。 <script type="text/javascript" src="./hoge.js"></script> という風に外部ファイルとしてなら恐らく上手くいくと思うのですが・・・。
- ベストアンサー
- JavaScript
- 複数スクリプトの読み込みでlightboxが動作しません
MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示（lightbox）をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示（lightbox（最新版））のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示（lightbox）が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示（lightbox）のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。
- 締切済み
- JavaScript
- Ajaxのエンコードで
私はshift_JISで作成したCGIのページがあるのですが、 Ajaxを導入しようとしたときに、Ajaxというか Javascriptでは、utf-8しか認識しないととあるサイトに書いてあったのですが、 そのCGIのページをphpに変更するにはものすごく多大な時間が 必要になってしまうんですが、CGIをutf-8仕様にするのも大変です AjaxでShift_JISに変換するような事はできませんでしょうか？ http://javascriptist.net/ref_prototype/ajax.periodicalupdater.html のサイトに乗っている <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> var myajax; function execute() { myajax = new Ajax.PeriodicalUpdater( "container", "./member.cgi", { "method": "get", "parameters": "id=$id", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); // ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え) var str = myajax.options.parameters; var hash = str.parseQuery(); hash["ajax_request_id"] = Math.random(); hash = $H(hash); myajax.options.parameters = hash.toQueryString(); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> を使用して自動更新をしようと思っているのですが
- ベストアンサー
- JavaScript
- Ajaxのウィンドウ表示位置について
ページを開くとAjaxのウインドウが表示されるようになっています。 バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。 ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですが ウインドウの真ん中に出したいのですがやりかたがわかりません。 試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。 サイトがバックにある状態でウインドウを出したいのでiframe以外で ウインドウを真ん中に表示する方法はあるのでしょうか？
- 締切済み
- JavaScript
- jqueryを使いajaxで取得したデータをコールバック関数外で取得する方法
下記のようなスクリプトでjQueryを使い、ajaxでtextを取得します。 コールバック関数内では、もちろんtextが使えるのですが、コールバック関数外からはtextに一切アクセスできなくなります。 このようにグローバルからajaxで取得したデータは取得できないのでしょうか？ prototype.jsでも同じ結果です。 グローバルからの取得法、ご存知の方いらっしゃいましたらご教示頂ければと思います。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"><!-- $(document).ready(function (){ $.get("./sample.txt",function(text){ alert(text); // textが取得できる }); }); alert(text); // textが取得できない // --></script>
- 締切済み
- JavaScript
- [prototype.js] Ajax.Requestの取得データをコールバック関数外で取得する方法
下記のコードを実行すると、 'undefined' 'hello' と表示されます。 （A）の箇所でグローバル変数gTestに'hello'が格納されている事を期待するのですが、undefinedとなります。 どういった理由でこうなるのでしょうか？ また、onCompleteで定義した処理内で、 値をグローバル変数に格納するにはどのような方法がありますか？ 何卒よろしくお願い致します。 -- <script src="/js/prototype.js" type="text/javascript"></script> <script type="text/javascript"> var gTest; function load() { new Ajax.Request('http://～/', { method: 'get', onComplete: displayData }); alert(gTest); //（A）undefinedと表示 } function displayData(httpObj) { gTest = 'hello'; alert(gTest); //（B）helloと表示 } load(); </script> --
- ベストアンサー
- JavaScript
- ジャバスクリプトが作動しません。
初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した１つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>
- ベストアンサー
- JavaScript
- AjaxでのHTML呼び出しでjavascriptが読み込まれません。
自分のホームページにprototype.jsを使用してボタンクリックでのHTML呼び出しをやっているのですが、<script>は無視されてしまいます。 ちなみにコードは、 <input type="button" value="GoogleNews" onclick="new Ajax.Updater('blk','page/sample1.html',{method: 'get'});"/> <input type="button" value="GoogleSearch" onclick="new Ajax.Updater('blk','page/sample2.html',{method: 'get'});"/> <input type="button" value="GoogleMaps" onclick="new Ajax.Updater('blk','page/sample3.html',{method: 'get'});"/> <div id="blk"></div> といったようなカタチです。もちろんprototypeは読み込んでいます。 呼び出すHTMLに<head>をつけてjavascriptだと定義してもダメでした。 ネットでも調べてみましたが、できないようなことがチラっとだけ書かれていました。 私がやりたいのは、ページを移動せずにボタン切替でGoogleSearchAPIやGoogleGadgetを表示させるというものです。 何かいい方法はないでしょうか？
- ベストアンサー
- JavaScript
- Ajax.Updaterで読み込んだ先の要素にイベントを設定したい
Ajaxの勉強をしているのですが、非同期通信で要素を書き換えた後の処理について困っています。 現在、prototype.jsのAjax.Updaterを利用して下記のようなソースを書き、動作の検証を行っているのですが、読み込み元のファイル(test.1html)から読み込んだ先(test2.html)の要素を取得することは出来ても、その要素に対してイベントを設定することが出来ません。 具体的に言うと、 targ2の要素をクリックすると、test2.html内のtarg3の要素を取得出来てアラートが走りますが、targ3の要素をクリックしてもイベントが実行されないという状況です。 このtarg3の要素に対してイベントを設定するにはどのようにすれば良いでしょうか？ ○test1.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajaxtest</title> <script src="prototype.js"></script> <script> window.onload=function(){ Event.observe('targ1', 'click', handler1); Event.observe('targ2', 'click', handler2); Event.observe('targ3', 'click', handler3); } function handler1() { var myajax = new Ajax.Updater( {success : "targetString"}, "test2.html", {evalScripts:true}); } function handler2() { alert($('targ3').innerHTML); } function handler3() { alert($('targ3').innerHTML); } </script> </head> <body> <div id="targ1">押して非同期通信開始</div> <div id="targ2">非同期通信終了後に押す</div> <div id="targetString"></div> </body> </html> ○test2.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajaxtest</title> </head> <body> <div id="targ3">非同期通信で呼ばれた要素</div> </body> </html>
- ベストアンサー
- AJAX
