Ajaxを使いonMouseoverで説明表示をする

このQ&Aのポイント
  • Ajaxを使ってonMouseoverで説明表示をする方法について解説します。
  • opentextを直接開くと普通に開けるが、getPageで開くとエラーになる状況について説明します。
  • event.clientXがある場合にエラーが発生するが、エラーなく表示できる方法について考えます。
回答を見る
  • ベストアンサー

Ajaxを使いonMouseoverで説明表示をする

以下の場合、opentext を直接開けば普通に開くのですが、 getPage で開くとエラーになってしまいます。 いろいろ試した結果 event.clientX がある場合エラーになるようです。 エラーがなく表示できるようになりませんでしょうか。 (文字数制限のためDIVタグ省略) function opentext(settxt){ divid="tiptext"; if(document.all){ d_div=document.all(divid); rx = event.clientX + document.body.scrollLeft +set_x; //rx = 100; ry = event.clientY + document.body.scrollTop +set_y; //ry = 100; }else{ d_div=document.getElementById(divid); rx = NNX + set_x; ry = NNY + set_y; } if(settxt){ d_div.style.display="block"; d_div.style.left = rx +"px"; d_div.style.top = ry +"px"; d_div.innerHTML = settxt; }else{ d_div.style.display="none"; d_div.innerHTML = ""; } } function MouseXY(NNevent){ NNX = NNevent.pageX; NNY = NNevent.pageY; } window.onmousemove = MouseXY;/* himajin.moo.jp */ function getPage(pageURL) { xmlhttp = createXMLHttp(); if (xmlhttp) { xmlhttp.onreadystatechange = setPageData; xmlhttp.open('GET', pageURL); xmlhttp.send(null); }else{ alert("XMLHttpRequest失敗"); } } function setPageData() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //alert("XMLHttpRequest成功"); opentext([xmlhttp.responseText]); } } // XMLHttpsオブジェクト作成 function createXMLHttp() { try { return new ActiveXObject ("Microsoft.XMLHTTP"); }catch(e){ try { return new XMLHttpRequest(); }catch(e) { return null; } } return null; }

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

  • ベストアンサー
noname#18558
noname#18558
回答No.2

>「関数」とはgetPageのことでしょうか? >getPage を呼んだときに 変数などに event.clientX をいれておけばよいのでしょうか? それでいいと思います。

moon_night
質問者

お礼

回答ありがとうございます。 getPageでevent.clientXを取り、 opentextを呼び出すときに、一緒に値を受け渡すように変更したところ、思い通りの動作ができました。 ありがとうございました。

その他の回答 (1)

noname#18558
noname#18558
回答No.1

getPageから呼んだ場合は、opentextは唯の関数として呼ばれるのでeventがとれません。 関数を呼んだときのeventを、どこか退避しておけばいいでしょう。

moon_night
質問者

お礼

ご回答ありがとうございます。 だた、不明点がございます。 「退避」とは具体的にどのようなことを指していらっしゃいますか? 「関数」とはgetPageのことでしょうか? getPage を呼んだときに 変数などに event.clientX をいれておけばよいのでしょうか? よろしくお願いします。

関連するQ&A

  • XMLHttpRequestでキャッシュを使用させないようにしたい

    ある場所にonMouseoverで ツールチップのようにデータを XMLHttpRequestを使用して読み込み、表示しています。 読み込みは getPage('xxx.php?id=$id') というようにPHPを使用してDBを読み取り、 該当のIDの情報を読み出しているのですが、 この情報が編集されることがあります。 しかし、一回開いてしまうと、キャッシュが効いているのか、内容を編集しても編集後の内容を取ってくれません。 テストをした結果ブラウザを閉じるか、キャッシュを削除すれば又最新の情報を表示してくれるのですが、 読み込むごとに最新の情報にアクセスする(キャッシュを使用しない)方法はないでしょうか。 ブラウザはIEを使用しています。 よろしくお願いします。 以下ソース function getPage(pageURL) { document.charset='EUC-JP'; if(document.all){ rx = event.clientX + document.body.scrollLeft; ry = event.clientY + document.body.scrollTop; }else{ rx = NNX; ry = NNY; } xmlhttp = createXMLHttp(); if (xmlhttp) { xmlhttp.onreadystatechange = setPageData; xmlhttp.open('GET', pageURL,true); xmlhttp.send(null); }else{ alert("XMLHttpRequest失敗"); } } function setPageData() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { opentext( [xmlhttp.responseText] ,rx,ry); //↑表示用ルーチンに受け渡しているだけなので割愛 } } // XMLHttpsオブジェクト作成 function createXMLHttp() { try{ return new ActiveXObject ("Msxml2.XMLHTTP"); }catch(e){ try { return new ActiveXObject ("Microsoft.XMLHTTP"); }catch(e){ try { return new XMLHttpRequest(); }catch(e) { return null; } } } return null; }

  • AJAXでサイト存在チェック時、スクリプトエラー

    AJAXを使用し、遷移したいサイトが存在する場合、その際サイトに遷移し、存在しない場合は、ほかのサイトに遷移するという処理を行いたいのですが、スクリプトエラーが発生しまい困っています。 遷移先をローカルサーバのリンクを指定するとうまくいくのですが、外部サーバのアドレスを指定するとエラーになってしまいます・・。何か制約があるのでしょうか? また、ほかの方法で実現できるのであれば、教えてください。 現在記述しているソースの一部を下記に添付します。 <script language="JavaScript" type="text/JavaScript"> <!-- function fucXMLHttpRequest(){ /* XMLHttpRequestオブジェクト作成 */ var xmlhttp = createXmlHttp(); xmlhttp.onreadystatechange = handleHttpEvent; function handleHttpEvent(){ if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) {       window.open("http://www.inte.co.jp/xxxx/xxxx"); } else { window.open("http://www.inte.co.jp/"); } } } xmlhttp.open("GET", "http://www.inte.co.jp/xxxx/xxxx" , true); xmlhttp.send(null); return false; } function createXmlHttp(){ if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { return new ActiveXObject("Microsoft.XMLHTTP"); } } else { return null; } } //--> </script> </head> <a href="#" onClick="fucXMLHttpRequest()">詳しくはこちら</a>

  • Ajaxで表示させると内容が不変

    下記Ajaxでtest.txtを表示できたのですが test.txtの内容を Hello Japan. 変えてもブラウザのキャッシュをクリアしない限り Hello World! が出つづけます。 下記ページにキャッシュ無効のヘッダをつけても同じです。 子の問題を解決する手段を教えてください。 test.txt: Hello World! x.html: <script> var xmlHttp; function loadText() {  if (window.XMLHttpRequest)  {   xmlHttp = new XMLHttpRequest();  }  else  {   if (window.ActiveXObject)   {    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   }   else   {    xmlHttp = null;   }  }  xmlHttp.onreadystatechange = checkStatus;  xmlHttp.open("GET","test.txt",true); xmlHttp.send(null); } function checkStatus() { if (xmlHttp.readyState==4&&xmlHttp.status==200) { var node = document.getElementById("disp"); node.innerHTML = xmlHttp.responseText; } } </script> <form> <input type="button" value="push" onClick="loadText()"> </form> <div id="disp"></div>

  • Ajaxの結果のページングの方法

    テキストボックスに文字を入力中に情報を検索し、同一ページに非同期で検索結果を表示する ページを作っています。 ページ自体はPHPで、javascript で XmlHttpRequestを使い、データ検索用のPHPに情報を送り 検索用のページで結果を整形するprint文を作り、xmlhttp.responseText で結果を表示しています。 この検索結果をページングしようと思い、 jquery.pagination.js を利用しようと思っております。 http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_pagenation  (このサイトの下側の物です) 実装してみたところ、なかなか良いところまで行ったのですが、ページを表示した最初の時に、 一件目の結果が反映されません。 ページングで次を押せば二件目が表示され、前のページを押せば一件目の表示がされているので、 結果は取得できているようですが、それぞれの処理のタイミングで、ページロード時に一件目のデータが取得できていないと思っていますが、解決方法が分かりません。 ソースの一部しか載せられませんが、解決方法がお分かりでしたら教えてください。 <!-- 検索のスクリプト --> <script type= "text/javascript"> function createXmlHttpRequest() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { return null ; } } var xmlhttp = null; var baseTime = new Date(); var c = 0; function query(flg) { var sword = document.getElementById('sword' ).value; var keyword = encodeURI(sword); var elapsed = parseInt((new Date()).getTime() - baseTime.getTime()); baseTime = new Date(); if (elapsed < 200) { return; } if (!xmlhttp) xmlhttp = createXmlHttpRequest(); if (!xmlhttp || xmlhttp.readyState == 1 || xmlhttp.readyState == 2 || xmlhttp.readyState == 3) { return; } if (keyword_save != keyword) { xmlhttp.open( "GET", "search-ajax.php?sword=" + keyword, true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById( "hiddenresult").innerHTML = xmlhttp.responseText; } } xmlhttp.send( null) keyword_save = keyword; } } window.onload = function() { var sword = document.getElementById("sword" ); if (sword.addEventListener) { sword.addEventListener( "keyup", query, false ) } else { sword.attachEvent( "onkeyup", query); } setInterval( "query('1')", 300); } </script> <!-- ページングのスクリプト --> <script type="text/javascript"> $( function() { function pageselectCallback(page_index, jq){ var new_content = $('#hiddenresult div.result:eq(' +page_index+')').clone(); $( '#res').empty().append(new_content); return false ; } function initPagination() { var num_entries = $('#hiddenresult div.result' ).length; // Create pagination element $( "#Pagination").pagination(num_entries, { num_edge_entries: 2, num_display_entries: 8, callback: pageselectCallback, items_per_page:1 }); } $( function(){ initPagination(); }); }); </script >

  • innerHTMLに重なるselectボックス

    小さな画面を出しているのですが、開いた画面がselectボックスに重なると、selectボックスが前面になってしまいます。 これはどうにかならないでしょうか? 以下サンプルスクリプト <html> <head> <title>テスト</title> </head> <body> <script language="JavaScript"><!-- b_color="red"; //枠の色 g_color="#ffffff"; //背景の色 f_size="10"; //文字サイズ f_color="#000000"; //文字色 set_x=-20; //オフセットX set_y=-5; //オフセットY //-------------------------------------- document.write("<div ID='tiptext'STYLE='position:absolute;z-index:2;border:1px solid;padding:5px;"); document.write("border-color:"+b_color+";font-size:"+f_size+"pt;background-color:"+g_color+";"); document.write("color:"+f_color+";"); document.write("display:none'>"); document.write("</div>"); function openw(t1){ divid="tiptext"; if(document.all){ d_div=document.all(divid); rx = event.clientX + document.body.scrollLeft +set_x; ry = event.clientY + document.body.scrollTop +set_y; }else{ d_div=document.getElementById(divid); rx = NNX + set_x; ry = NNY + set_y; } if (t1) { d_div.style.display="block"; d_div.style.left = rx +"px"; d_div.style.top = ry +"px"; d_div.innerHTML = "<p>画面表示</p>"; d_div.innerHTML += "<span style=\"cursor:hand;color:#0000ff;text-decoration: underline;\" onclick=\"openw('')\">閉じる</span><br>"; d_div.innerHTML += '<br>'; d_div.innerHTML += 'a<br>'; d_div.innerHTML += 'i<br>'; d_div.innerHTML += 'u<br>'; d_div.innerHTML += 'e<br>'; d_div.innerHTML += 'o<br>'; d_div.innerHTML += '<br>'; //d_div.innerHTML = d_div.innerHTML +'<a href="#" onclick="openkeyboard(\'\')">閉じる</a><br>'; d_div.innerHTML += "<span style=\"cursor:hand;color:#0000ff;text-decoration: underline;\" onclick=\"openw('')\">閉じる</span><br>"; }else{ d_div.style.display="none"; d_div.innerHTML = ""; } } function MouseXY(NNevent){ NNX = NNevent.pageX; NNY = NNevent.pageY; } window.onmousemove = MouseXY; /* himajin.moo.jp */ // --> </script> <a href="#" onclick="openw('1')">子画面表示</a><br> あ<br> い<br> う<br> え<br> お<br> <a href="#" onclick="openw('1')">子画面表示</a><br> <form> <input type="text"><br> <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><br> <select name="zz"> <option value="0">00000000000000</option> <option value="1">11111111111111</option> <option value="2">22222222222222</option> <option value="3">33333333333333</option> </select> </form> <a href="#" onclick="openw('1')">子画面表示</a><br> </body> </html>

  • Ajax は NN でも使えますか?

    初歩的な質問ですみません。 Ajax の非同期通信で、XMLHTTP オブジェクトを作成するスクリプトを見ると、 function createXMLHttpRequest() { var XMLhttpObject = null; try{ XMLhttpObject = new XMLHttpRequest(); }catch(e){ try{ XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ return null; } } } return XMLhttpObject; } のように Microsoft のオブジェクトを読み込んでいるように見えるのですが、NN でもつかえるのでしょうか。 また、Macintosh との互換性はどうなのでしょうか。 ご存知の方はお教えください。

  • AJAXのレスポンスをテキストエリアに表示

    以下のようなスクリプト(chat.htmlと、write_log.php)において、chat.htmlからwrite_log.php に送ったリクエスト(xmlHttpRequestオブジェクト利用)に対するレスポンスを受信後に、 document.getElementById("disp_chat").innerHTML = xmlhttp.responseText; としているのに、チャットのボディである、テキストエリアにレスポンスの文字列(ファイル(log.txt)の中身).が表示されません。printした文字列がwrite_log.phpのページで表示されているだけなのです。テキストエリアに、サーバーサイドのPHPから返されるレスポンスの文字列を、テキストエリアに表示するにはどこが間違っているのでしょうか。 ご指導、どうぞよろしくお願いします。 【chat.html】 <!DOCTYPE html> <head><title>チャット</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body class="body"> <script type="text/javascript"> var xmlhttp; function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ // レスポンス受信後に呼び出される関数 // alert('test'); document.getElementById("disp_chat").innerHTML = xmlhttp.responseText; } } function onClicked(){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = httpHandler; // コールバック関数 xmlhttp.open("GET", "write_log.php"); xmlhttp.send(null); // チャット音鳴動 var myAudio=document.getElementById("audio"); myAudio.play(); } function getDate(){ var date = new Date; var hours = date.getHours(); var minutes = date.getMinutes(); if(hours>=0 && hours<10){ hours = "0" + toString(hours); } if(minutes>=0 && minutes<10){ minutes = "0" + toString(minutes); } return (hours + ":" + minutes); } </script> <center> <div id="title">【チャット】</div> <div id="container"> <div id="disp"> <textarea id="disp_chat" class="disp"></textarea> </div> <div id="input"> <form name="form1" method="GET" action="write_log.php"> お名前:<input type="text" name="user" id="user" class="name"> メッセージ:<input type="text" name="input_chat" id="input_chat" class="input"><br><br> <input type="submit" id="submit" value="送信" onclick="onClicked()"> <!-- <input type="button" id="submit" value="送信" onclick="onClicked()">--> </form> </div> </div> </center> <audio id="audio" src="mjkchat.mp3">Your browser does not support the audio element.</audio> </body> </html> 【write_log.php】 <?php date_default_timezone_set("Japan"); $date = date('H:i:s'); $user = $_GET['user']; $chat = $_GET['input_chat']; $buf = $date.' '.$user.':'.$chat."\n"; $filename = "./log.txt"; $fp = fopen($filename, 'a'); fwrite($fp, $buf); fclose($fp); $buf2 = file_get_contents($filename); print $buf2; //header("Location: chat.php"); ?>

  • XMLHttpRequest() Ajaxについて

    こんにちは。Ajaxに挑戦しているのですが、テキストフィールドに入力して送信ボタンを押したら、自作関数の XmlHttpRequest()を呼び出して、kakunin.jspに飛ばして、kakunin.jspで作ったコードを<result>タグ内に表示し、その際現れる「削除」ボタンをクリックしたら、今度は自作関数 deleteRequest()を呼び出し、sakujyo.jspに飛ばしてデータベースのレコードの削除を行い、<result>タグ内の表示をかえたいのですが、削除の方がうまくいっておりません(削除するボタンを押して、deleteRequest()は呼び出しているのですが、そのあと、delete.jspに飛ばず、kakunin.jspに飛びます)。以下が大まかなコードです。 function XmlHttpRequest(){ if(window.XMLHttpRequest){ httpObject=new XMLHttpRequest(); } else if(window.ActiveXObject){ httpObject=new ActiveXObjec("Msxml2.XMLHTTP"); } httpObject.onreadystatechange=display; 途中省略します。     httpObject.open("GET","kakunin.jsp?nen="+encnen+"&tsuki="+enctsuki+"&syaincode="+encsyaincode,true); httpObject.send(null); } function display(){ if(httpObject.readyState==4 && httpObject.status==200){ document.getElementById("result").innerHTML=httpObject.responseText; 省略します。 } } function deleteRequest(){ if(window.XMLHttpRequest){ delhttpObject=new XMLHttpRequest(); } else if(window.ActiveXObject){ delhttpObject=new ActiveXObject("Msxml2.XMLHTTP"); } delhttpObject.onreadystatechange=displaysql("削除しました"); 省略します delhttpObject.open("GET","delete.jsp?nen="+encnen+"&tsuki="+enctsuki+"&syaincode="+encsyaincode,true); delhttpObject.send(null); } function displaysql(msg){ if(delhttpObject.readyState==4 && delhttpObject.status==200){ document.getElementById("result").innerHTML=delhttpObject.responseText; alert(msg); kidou(); } } こういったやり方がわからなく、自己流でやってみましたので、おかしな部分もあるかもしれませんが、やりたい事は押すボタンによって、飛ばすjspファイルを変え、<result>タグ内の表示も、各jspファイルで、 出力されたものを表示させたいのですが、自分で考えたやり方ではどこか間違っているようですので、どなたかアドバイスの方、よろしくお願いいたします。 環境は、IE7です。よろしくお願いいたします。

  • ajax でのデータ受け渡しに関して

    ajax でのデータ受け渡しに関して わかりにくい内容で申し訳ありません。 現在、PHPで作成されているプログラムの中に、ajaxを組み込みたいと考えています。 処理の動きとしては、あるプルダウンが選択された場合、すぐさまその値をもとにしてDBへ 検索しに行くというものです。 通常、PHPだけの処理の場合、POST等を用いて、ボタンが押されたら違うphpファイルへ値を 送る事が可能かと思われます。 その処理をajax で選択されたらすぐに検索、表示というような動きをしたいと考えて います。 但し、同じソース、画面上の中でなら、以下のような記述で表示させる事は可能かと 思われますが、HTMLで分割した画面で、上段で選択されたプルダウンの値をもとにして、検索 された結果を下段に表示させたいと考えています。 そもそも、ajaxでは同じ画面上での受け渡ししかできず、上記のように分割されたものでは 不可能なのでしょうか。。。 初歩的な内容で申し訳ありませんが、教えて頂きたいと思います。 《記述内容》 ※ 現状では以下のようなサンプル記述をもとに、自画面(同一)上では表示が可能となっています。 <script> function createXMLHttpRequest(){ if( window.XMLHttpRequest ){ return new XMLHttpRequest(); }else if( window.ActiveXObject ){ try{ return new ActiveXObject( "Msxml2.XMLHTTP" ); }catch(e){ return new ActiveXObject( "Microsoft.XMLHTTP" ); } } return null; } function getDataPost( serverURL, objID ,obj){ var ajax = createXMLHttpRequest(); ajax.open( "POST", serverURL ); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.onreadystatechange=function(){ if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){ if(objID!=""){ var obj = document.getElementById( objID ); obj.innerHTML = ajax.responseText; } } } ajax.send( obj.name+"="+obj.value ); } </script> <select name="fuga" onchange="getDataPost('hogehoge.php','hoge',this)"> <option value="">---</option> <option value="1">1</option> <option value="2">2</option> </select> <div id="hoge"></div> よろしくお願いします。

    • ベストアンサー
    • AJAX
  • javascriptで困っています。教えてください

    以下のようにjavascriptの内容を書いた外部のテキストファイルを読み込んで、実行しようとしているのですが、うまくいきません。普通にjavascriptを読み込むのは分かっているのですが、このような方法ができないのでしょうか?よろしくお願いします。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <div id="jsbox"></div> <script type="text/javascript"> var jsbox = document.getElementById("jsbox"); //非同期通信///////////////////////////////////////////// var xmlHttp; loadText(); function loadText(){ if (window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ if (window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = null; } } xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://xxxxxxxxxxxx/js_test.txt", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var str = xmlHttp.responseText;alert(str); jsbox.innerHTML = str; test_js(); } } ///////////////////////////////////////////////////////////////// </script> </body> </html> テキストファイルをhttp://xxxxxxxxxxxx/js_test.txtに置き、テキストファイルの内容が <script type="text/javascript"> function test_js(){ alert("test"); } </script>

専門家に質問してみよう