- 締切済み
AJAXでページを読み込ませられない
今ページ作りで困っています。 今まではそのページ(仮にpg1.htm)にAJAXにてDIVタグ(id=otherpg)内に他のページ(仮にaaa.htm)を読み込ませてうまくいっていました。 しかし、今回作っているページの構成ではpg1.htmの中でロードするのではなく、他ページ(仮にpg2.htmとする)に切り替えています→window.location.replace("pg2.htm") pg1.htmとpg2.htm両方とも同じメニューを使っており、pg1.htmが表示されてる時はDIVタグ内にaaa.htmをロードするとすんなり表示されます。 pg2.htmを表示しているときにスクリプト内にてpg1.htmに切り替えてからpg1.htmの中のDIVタグにaaa.htmを読み込ませようとすると読み込んでくれずうまくいきません。 結局pg1.htmが表示された後にDIVタグにaaa.htmを読み込んでくれというのをメニューから行うとできますが二度手間になってしまいます。 具体的にスクリプトで書くと、 //現在のページがpg1.htmの場合 if (toppg=="pg1.htm"){ ajaxpage(selection,' otherpg '); } //現在のページがpg1.htmではない場合=pg2.htmの場合 if (toppg!="pg1.htm"){ location.href="pg1.htm"; ajaxpage(selection,’ otherpg’); } toppgはdocument.location.hrefとsplit("/")にて現在のページ名、この場合はpg1.htmかpg2.htmがtoppgに格納されます。 ちなみにajaxpage(selection,' otherpg ');のところのajaxpageは以下のページに載っているAJAXのスクリプトを使用しています。 http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm ajaxpage('読み込ませたいページ名.htm','DIVタグとかのコンテナID名'); という感じの代物です。 うまく二度手間にならないようにスムーズにいく方法はないでしょうか？
- smwithdm
- お礼率34% (17/49)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>やはりそういう手しかないのですかね？ 自分自身を切り換えた後に切り換える前のスクリプトから切り換えた後のページが操作できないので、 自分自身でさせるしかないように思います。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
ページを切り換えるスクリプトの後のスクリプトが希望するように動かないのはある意味当たり前のような気がします。 location.href="pg1.htm"; を例えば location.href="pg1.htm?page=selection&id=otherpg"; (selection は、実際には中味なので、 location.href="pg1.htm?page=" + selection + "&id=otherpg"; とでもなるのかもしれないが、直接埋め込むということで書いています） とでもして、pg1.htm 自身に？以降のパラメータの処理として読み込ませる処理をさせたらどうでしょうか
補足
やはりそういう手しかないのですかね？ 他の方法はないのでしょうか？
関連するQ&A
- AJAXを使って、htmlページにスクリプト
AJAXを使って、htmlページにスクリプトを記述して、 再読み込みすることなく表示することはできたのですが、 同じドメイン内に限られてしまいます。 違うドメインにスクリプトを記述した場合には、 エラーとなってしまいます。 AJAXはドメイン超えはできないのでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- Ajax.Requestで取得したHTMLソースから'href'の値を
Ajax.Requestで取得したHTMLソースから'href'の値を取得する方法について Javascriptにて取得した別ページのHTMLタグから 必要な部分のみ値を取得し、配列に格納することは可能でしょうか？ 以下Javascript ------ var url = "http://test/index.htm"; new Ajax.Request( url, { "method":"get", asynchronous:false, onComplete: function(request) { html = request.responseText; } } ); alert(html); ------ 以下"http://test/index.htm"のHTMLタグ ------ <html> <head> </head> <body> <a href='http://test/index2.htm'>index2</a> <a href='http://test/index3.htm'>index3</a> <div>index4</div> </body> </html> ------ 上記で"http://test/index.htm"のHTMLタグの全てを取得して出力することはできたのですが、 "href"の"http://test/index2.htm" "href"の"http://test/index3.htm"のみ配列に格納したいのです。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- Ajaxとページ分割について
下記のようなスクリプトを作成しました。PEARのPagerによって取り込んだdataをページごとに分割して表示する というものです。 問題点は、最初のページを表示させるのは Ajaxによって実行されていますが、サイト上の「次のページ」をクリックしたときにAjaxから外れてしまう。 サイト上でクリックしてページを切り換えるときにも、Ajaxによって行いたいのですが、 どのような スクリプトにすればいいのか、ヒントなりを教えていただければ助かります。 ■p01.htmlファイル ----------------------- <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype-1.6.0.2.js" ></script> <script type="text/javascript" src="p01.js" ></script> </head> <body> <p></p> <form name="am01"> name：<input type="text" name="data01"> age ：<input type="hidden" name="page_num" value="0"> <input type="button" onClick="ajaxFunction01();" name="exec" value="aaa"/> </form> <div id="result01"></div> </body> </html> ■p01.jsファイル ------------------------- function ajaxFunction01(){ var ajax = new Ajax.Request("p01.php?data01=" + encodeURI(document.am01.data01.value), {method: "GET", onSuccess: gotData}); function gotData(xmlhttp) { document.getElementById("result01").innerHTML = xmlhttp.responseText; } } ■p01.phpファイル -------------------------- <?php require_once("MDB2.php"); $db_type = "mysql"; $sv = "localhost"; $db_name = "phplesson"; $user = "dbuster"; $pass_w = "pass"; $table = "address_t"; $lim = 3; $pg = 0 + $_GET['pg'];//ページ取得の引数 $thispg = 'p01.php'; //サイトのaddress $dsn = "$db_type://$user:$pass_w@$sv/$db_name"; $mdb2 =& MDB2::factory($dsn); if (PEAR::isError($mdb2)){ die($mdb2->getMessage());//"接続エラー" } $res =& $mdb2->query('SELECT * FROM '.$table); if (PEAR::isError($res)){ die($res ->getMessage());//"接続エラー" } if ($mdb2->getOption('result_buffering')) { $dtcnt = $res->numRows();//テーブルに記録された行数 } else { echo '"result_buffering" が無効で行数が取得出来ない'; } $result_types = true ; $mdb2->loadModule('Extended'); $mdb2->setLimit($lim, ($pg * $lim)); $res = $mdb2 -> extended-> autoExecute($table,null,MDB2_AUTOQUERY_SELECT,false,null,true,$result_types); if (PEAR::isError($res)){ die($res->getMessage());//"接続エラー" } if ($dtcnt > (($pg+1) * $lim)){ $nxt = "<a href=\"" .$thispg. "?pg=" .($pg+1). "\">次の" .$lim. "件</a>"; } else { $nxt = "このページが最終"; } if ($pg > 0){ $befr = "<a href=\"" .$thispg. "?pg=" .($pg-1). "\">前の" .$lim. "件</a>"; } else { $befr = "このページが最初"; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <p> <?php echo $befr ?> <?php echo $nxt ?> </p> <table border="1"> <tr> <td>number</td><td>name</td><td>birthday</td><td>address</td> </tr> <?php while ($row = $res->fetchRow(MDB2_FETCHMODE_ASSOC)){ echo "<tr>"; echo "<td>" .$row["number"]. "</td>"; echo "<td>" .$row["name"]. "</td>"; echo "<td>" .$row["birthday"]. "</td>"; echo "<td>" .$row["address"]. "</td>"; echo "</tr>"; } ?> </table> <?php //切断 $mdb2 -> disconnect(); ?> </body> </html>
- 締切済み
- PHP
- ajaxを使用したページ移動における検索エンジン対策
『 2ページ目に移動 → 』 等のリンクをajaxで処理してしまうと、検索エンジンはjascriptを解析しないので、検索エンジンに2ページ目が反映されませんよね。 回避策の基本的な概念としては、以下のソースでよろしいのでしょうか。 <script type="text/javascript"><!-- document.write("<a href='javascript:ajax_link(2);return false'>２ページ目に移動 →</a>"); --></script> <noscript> <a href="ｈttp://sample.php?page=2">2ページ目に移動 →</a> </noscript> ※1 検索エンジンに２ページ目が反映されることを目的としています。 ※2 ajaxリンク・通常リンク共に、移動後のページ表示処理は完成しているものとします。 ※3 ajax_linkのjavascriptは完成しているものとします。 大丈夫だとは思うのですが、心配なので質問させていただきました。 また、他の解決策を知っている方は教えてほしいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ＡＪＡＸでのリロードに関して
ＡＪＡＸでのリロードに関して 教えて下さい。 あるページを一定の時間でリロードしたいと考えています。 その際に、javascript を使用すれば、以下のような記述で何分か単位で 自動リロードが可能ですが、それをＡＪＡＸにて実現するにはどのように記述 すれば良いでしょうか？？？ ***** javascript の場合 <TITLE>ページをリロードする方法</TITLE> <SCRIPT TYPE="text/javascript"> <!-- var timer = "300000"; //指定ミリ秒単位 function ReloadAddr(){ window.location.reload(); //ページをリロード } setTimeout(ReloadAddr, timer); //--> </SCRIPT> よろしくお願いします。
- ベストアンサー
- AJAX
- JavaScriptで擬似フレーム、読み込み完了を知るには？
サイト内の各ページ上部に、Ajaxで共通のメニュー部分.htmlを読み出し、表示しています。 参考：AjaxでIFRAME的な表示をやってみる http://bizcaz.com/archives/2006/11/13-000253.php 参考：階層メニューにJavaScriptで書き換え http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies_menu2 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="ajaxcontents.js"></script> <script type="text/javascript" src="ListbasedDHTMLmenu.js"></script> </head> <body> <span id="ajax_content_block"></span> <script type="text/javascript"> <!-- ajax_content_onload_get('メニュー部分.html','','ajax_content_block','ajax_content_progress'); //--> </script> <div> 本文 </div> </body> </html> ajaxcontents.jsでメニュー部分.htmlを読み出しListbasedDHTMLmenu.jsで階層メニューに書き換えています。 "dhtmlgoodies_menuObjはNullまたはオブジェクトではありません" のエラーが出て、階層メニュー部分が表示されません。 dhtmlgoodies_menuObjは階層メニュー書き換えのListbasedDHTMLmenu.jsで使われています。 ページ読み出しjavascript完了後に、ページ書き換えjavascriptを実行すればと思っているのですが、 方法の検討がつきません。 if ( location.search.indexOf("1") == -1 ) { setTimeout("_reload()",100); } function _reload() { location.href = location.href + "?1"; } ↑でリロードさせて見たのですが、バックすると表示されなくなります。 すいませんがアドバイスをお願いいたします。
- ベストアンサー
- JavaScript
- Ajaxで外部サイトの取り込み
Ajax非同期通信、例えばJQueryの以下の様にyour-web-siteをページ内に取り込んだ場合、cssやjavascriptのパスが相対パスで指定されているのが原因で正しく表示されない場合があります。通常のhtmlで静的に取り込む場合は<iframe>で取り込むか、<base href="...">などを用いて相対パスを絶対パスに変換するのですが、Ajaxで動的に取り込む場合のうまい方法がわかりません。 よいアイデアや方法があればご教示ください。 --- javascript---- $(function (){ $("#a").load("http://your-web-site/"); }); ---- html -------- <div id="a"></div> ------------------
- 締切済み
- JavaScript
- Ajaxを使った検索サイト作成
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>
- ベストアンサー
- AJAX
- 単独で開かれたiframeを親ページに表示したい
ブログ記事(blog1.html、blog2.html、blog3.html)を親ページ(index.html)のiframeとして表示しています。 親ページを開いた際には、デフォルトで最も新しいブログblog3.htmlが表示されるようになっています。 ブログ記事が単独で開かれた場合には、 if (window == window.parent) { location.href = "./index.html"; により自動的に親ページに導くようにしていますが、その際に開かれたブログ記事を表示したいと思います。 当たり前ですが、現在はblog3が開かれてしまいます。 どのようにしたらいいでしょうか。 以下、現在確認中のサンプルスクリプトです。 ■親ページ■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <p>index.html</p> <iframe src="./blog3.html" frameborder="2" width="300" height="100"></iframe> <div id="result"></div> </body> </html> ■ブログ1■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>blog1</title> </head> <body> <p>blog1.html</p> <script> // 単独で開かれている場合 if (window == window.parent) { location.href = "./index.html"; // iframeで開かれている場合 } else { } </script> </body> </html> ■ブログ3■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>blog3</title> </head> <body> <p>blog3.html</p> <script> // 単独で開かれている場合 if (window == window.parent) { location.href = "./index.html"; // iframeで開かれている場合 } else { } </script> </body> </html>
- ベストアンサー
- JavaScript
- Ajaxを使った読み込みができない
●質問の主旨 Ajax（非同期通信）を使って、 ブラウザ上でテキストファイルの読み込みを させたいのですが、できません。 Ajaxにお詳しい方、ご指導願います。 ●質問の補足 HTML5とjqueryの技術を使って、 テキストファイルの中身（Hello,World)の 読み込みをさせたいと考えております。 参考サイトにもとづいてやってますが、 画像の表示ができません。 表示させるためにはどうしたら良いでしょうか？ ●コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryの練習</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <h1>jQueryの練習</h1> <div id="main"></div> <input type="button" id="kick_ajax" value="Ajax!"> <script> $(function() { $('#kick_ajax').click(function() { $('#main').load('contents.txt', function() { alert('読み込み終了！'); }); }); }); </script> </body> </html> ●テキストファイルのファイル名 contents.txt ●参考サイト（ドットインストール） http://dotinstall.com/lessons/basic_jquery/519
- ベストアンサー
- AJAX
お礼
一応、使いものになる程度にはできたのですが、その location.searchの追加分の影響で思うように動作しないのでまだまだ改良しなければいけませんが、ご指摘的ありがとうございますm(__)m