ロード後にイベントをセットしたい

このQ&Aのポイント
  • データを送信してからonCompleteの関数の中に記述しました。ちゃんとonCompleteの中に来ていることは確認できたのですが、idがtestのタグをクリックしても反応がありません。
  • Ajaxを使用してデータを送信し、onCompleteの関数内でidがtestのタグのonClickイベントを設定していますが、クリックしても反応がありません。
  • プログラムを実行すると、データが正しく送信され、onCompleteの関数が実行されますが、idがtestのタグをクリックしても反応がありません。
回答を見る
  • ベストアンサー

ロード後にイベントをセットしたい

初めからタグに埋め込まないで、ロード後にイベントをセットしたいと思い、 データを送信してからonCompleteの関数の中に記述しました。 ちゃんとonCompleteの中に来ていることは確認できたのですが、 idがtestのタグをクリックしても反応がありません。 以下のプログラムのどこがいけないのでしょうか? <script type="text/javascript" src="prototype.js"></script> function post_data() { new Ajax.Request( "test.php", { method: "get", parameters: "test=aa", onComplete: function(httpObj){ var obj = document.getElementById("test"); obj.onClick = sample; } } ); } function sample() { alert("aa"); } window.onload = function() { post_data(); } <a href="" id="test">test</a>

質問者が選んだベストアンサー

  • ベストアンサー
  • ESate
  • ベストアンサー率64% (11/17)
回答No.1

obj.onClick = sample; ↓ obj.onclick = sample; JavaScriptはhtmlと違い大文字小文字は区別されます

takagoo100
質問者

お礼

ご返答ありがとうございます。 できました、ありがとうございます。 なるほど、まさかとは思っていたのですが、 気にせずHTMLに書いてたままに記述してました・・・

関連するQ&A

  • 関数の中の値を取り出したい

    prototype.jsを使って送信して返ってくるデータを、 onCompleteの関数の中で「ret」に値を入れてると思うのですが、 出ててきたときにはalertで表示されません。 どうすればこの形でその関数の中の値を取り出すことができるのでしょうか? function get_data() { ret = ""; new Ajax.Request( "test.php", { method: "get", parameters: "test=aaa", onComplete: function(httpObj){ ret = httpObj.responseText; } } ); alert(ret); return ret; }

  • 【Ajax】SHIFT-JISの文字化け 

    AjaxのSHIFT-JIS文字化けで悩んでいます。 下記コードです。※prototype.js使用※ <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <title>Sample</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function loadHTMLFile(fName) { new Ajax.Request(fName, { method: "get", onComplete: displayData }); } function displayData(httpObj){ alert(httpObj); $("result").innerHTML =httpObj.responseText; } // --></script> </head> <body> <h1>サーバー上のHTMLファイルを読み込む</h1> <form> <input type="button" value="●●.htmlファイルを読み込み" onClick="loadHTMLFile('●●.html')"> </form> <div id="result"></div> </body> </html> ●●.htmlおよび、このコードを記述しているファイルのエンコードは "SHIFT-JIS"です。 ●●.htmlのエンコードを"UTF-8"にするとうまく表示できます。 "SHIFT-JIS"同士のやり取りの方法を教えて頂きたく思います。 宜しくお願い致します。 ※サーバはwindow用XAMPを自分のローカルに使用しています。  アパッチの設定はいじっていません。

  • jQueryとprototypeの共存

    prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() {     jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>

  • AJAXでformから値を飛ばす

    AJAXを勉強してます。 formから値を飛ばす事はできたのですが、 直リンクというのはできないのでしょうか? uri ="http://www.○○○.cgi";の部分に直のアドレスを入れたいのですが、教えていただけないでしょうか? よろしくお願いいたします。 <script src="prototype.js"></script> <script> function dosubmit( ) { uri ="http://www.○○○.cgi"; new Ajax.Updater( 'result', 'uri', { method: 'post', parameters: $('myform').serialize() } ); $('myform').reset(); } </script>

  • prototype.jsのAjax.Request

    javascript部分 function loadDataFile(intvalue){  new Ajax.Request("uploader.php",{   method:'post',   onComplete:function(httpObj){    test(intvalue);   }  }); } function test(intvalue){  // 画像表示のための処理 } htmlのform部分 <form action="sample.php" method="post" name="syouhintouroku" enctype="multipart/form-data">  <input type="file" id="img_path1" name="img1" value="" />  <input type="button" value="画像を確認" onclick="loadDataFile(引数);" /> </form> 今は、ざっとこのような感じで書いています。 「画像を確認」ボタンが押されると画像がアップロードされるようにしたいのですが画像が送られていません。 ちなみに、uploader.phpというのはPOST送信されてきたファイルをサーバー側のファイルに保存する処理をしています。通常のformのsubmitでは画像はちゃんとアップロードされるのでPHPファイルのほうに問題はないと思われます。 もしかして、Ajax.Requestでは画像が送れないとか書き方が違うとかいうことなんでしょうか? よろしくお願いします。

    • ベストアンサー
    • AJAX
  • ajaxでエラー処理

    お世話になります。 prototype.jsを使ってajaxのエラー処理を考えております。 そこで質問なのですが、以下のソースで OK.phpでは正常に処理が行われ、 NG.phpでは強制的にonFailure処理を行わせたいと考えております。 PHP側(NG.php)で、操作出来ませんでしょうか? よろしくお願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function ajax(fName) { var filename = fName + "?cache="+(new Date()).getTime(); new Ajax.Request(filename, { method: "get", onSuccess: displayData, onFailure: displayError }); } function displayData(httpObj) { $("result").innerHTML = httpObj.responseText; } function displayError(httpObj) { $("errMsg").innerHTML = httpObj.responseText; } // --> </script> </head> <body> <input type="button" value="正常処理" onClick="ajax('OK.php')"><br> <input type="button" value="エラー処理" onClick="ajax('NG.php')"><br> <div id="result"></div> <div id="errMsg"></div> </body> </html>

  • AJAXでformから値を飛ばす

    困り度: すぐに回答を! AJAXを勉強してます。 formから値を飛ばす事はできたのですが、 直リンクというのはできないのでしょうか? uri = ​'http://www.​○○○.cgi' ;の部分に直のアドレスを入れたいのですが、教えていただけないでしょうか? よろしくお願いいたします。 <script src="prototype.js"></script> <script> function dosubmit( ) { uri ='​http://www.​○○○.cgi'; new Ajax.Updater( 'result', 'uri', { method: 'post', parameters: $('myform').serialize() } ); $('myform').reset(); } </script>

  • [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> --

  • prototype.jsのAjax.Requestでeventを引数にしたのですが

    prototype.jsのAjax.Requestといつ便利な関数がありますが onComplete時の引数にeventオブジェクトを設定したらIE7では eventオブジェクトが引き継げませんでした。 たとえばこのようなメソッドで function ajax_request(url, params, method, ele1, ele2){ var nt = new Date(); var pr = params + "&nt=" + nt.getTime(); var a = new Ajax.Request( url, { method: "get", parameters: pr, onComplete: function(request){ method(request, ele1, ele2); } } ) }; ele1にeventオブジェクトを設定し、methodを実行しても デバックで、ele1.typeが何も表示されませんでした。 firefox2.0だと「click」など正しく表示もされオブジェクトが引き継がれておりました。 何が問題なのでしょうか?それともIE7ではeventオブジェクトを引き継ぐことは出来ないのでしょうか?

  • 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> を使用して自動更新をしようと思っているのですが