質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

ページを遷移せずに表示する

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,298

SugiuraY

score 249

Ajaxに未だ不案内であり、非同期通信ができるということしか知らず
抽象的に質問かもしれず申し訳ございませんがお伺いさせてください。

現在、下記のように左右のBoxA及びBoxBがあり、甲を見たい場合「甲を表示する」を選択することにより
ページを遷移せずにBoxBにxxx.phpの内容を表示させたいと考えております。
もちろん、その後同じページで乙を見たい場合にはページを遷移することなく、「乙を表示する」を選択するにより
同様に閲覧可能という仕組みです。

もちろん、選択肢が少なく単純なものであれば
描写するdivを用意しておきJSでclickイベントでshow/hide等で切り替え表示すれば実現できますが
選択肢が非常に多く、表現するものが複雑なため、予めHTMLの要素にこれらを読み込ませておくのは
非現実的か思っております。

技術的にこのようなことが可能であるのか?また、このようなことを実装したい場合参考になるようなサイト等をご教示頂ければ
幸いわいです。
宜しくお願いいたします。

<div id="boxA" style="float:left;width:500px;height:800px;border: solid 1px #454545">
  <p><a href="xxx.php">甲を表示する</a></p>
  <p><a href="yyy.php">乙を表示する</a></p>

</div>

<div id="boxB" style="float:left;margin-left:10px;width:500px;height:800px;border: solid 1px #454545">

</div>

改めて、より具体的な目的を書きに加筆させて頂きます。

単純化するつもりでアンカータグにしましたが、実際には外部のファイルの特定のタグをDOM(PHP)で抽出して表示させることが目的です。ユーザーの操作でboxAでkoというvalueを取得し、これを元に特定のディレクトリからko.phpをloadして、id="ko_1"のタグを取得し、BoxBに表示するということになります
ko.php
<div id="ko_1"></div>
<div id="ko_2"></div>

otsu.php
<div id="otsu_1"></div>
<div id="otsu_2"></div>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

甲がxxx.phpで乙がyyy.phpだとしてそれをアンカーで呼び出せるようになっているということは
それぞれがhtmlとして完結していると考えてよいですね?
そうなると非同期で甲や乙のデータを持ってきても、もろもろの競合が発生するので
BoxBに表示することは困難です。

あまりお勧めできませんがご希望の処理はiframeでなさるのが妥当です

 追記

xxx.phpやyyy.phpを部品として取り込むのであればこうしてください

  • mypage.htm
<style>
#boxA{float:left;width:500px;height:800px;border: solid 1px #454545;}
#boxB{float:left;margin-left:10px;width:500px;height:800px;border: solid 1px #454545;}
.xxx{background-Color:lime;}
.yyy{background-Color:aqua;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#boxA a').on('click',function(e){
    var me=$(this);
    $.ajax({
    url:me.attr('href'),
    success:function(data){
      $('#boxB').html(data);
    },
    });
    e.preventDefault(); //アンカーのclickを無効にする
  });
});
</script>

<div id="boxA">
  <p><a href="xxx.php">甲を表示する</a></p>
  <p><a href="yyy.php">乙を表示する</a></p>
</div>
<div id="boxB">
</div>
  • xxx.php
<div class="xxx">test</div>
<div class="xxx">test</div>
<div class="xxx">test</div>
  • yyy.php
<div class="yyy">test</div>
<div class="yyy">test</div>
<div class="yyy">test</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/14 12:38 編集

    理解不十分のままのコメントだと混乱を招くかも知れませんが…最初の自分のコメントは
    「あるボタンを押したらサーバーへデータを要求し、応答受信時にhtmlへ反映させるといった処理を複数のボタンに書くとAボタンを押した処理が裏で継続中にBボタンがおされるといった状況でBを無効にするなりA,Bが動いても問題ないようにするなり期待通りの振る舞いをさせることができるかどうか気にして設計しなければならないということかな?」
    と感じたことからの発言です。質問者さんのやろうとしていることについて何が最適かを充分念頭に置けた上でのコメントでないので本件に関係しない話あるいは自分の根本的勘違いでしたらスミマセン。
    ---
    説明がめんどうなレベルの話であればスルーしてください m(_ _)m

    キャンセル

  • 2017/04/14 12:46

    うまく伝わってないようであれば申し訳ないです

    >非同期ゆえの競合
    という言葉の問題を指摘したかっただけです。
    ajaxは同期処理(非推奨ですが)も可能で、たとえ同期処理でやっても
    競合はおこります・・・という意図です

    キャンセル

  • 2017/04/14 12:50

    同期でも競合が起こるという点でしたか。それは認識できてなかったのでdynamic HTMLについて学びながら具体例を知っていこうと思います。コメントありがとうございました。

    キャンセル

+1

結論からいえばajaxとはまさにそのようなことをするための方式と言えると思います。サーバーとブラウザー間の通信を前提とするため必然的に非同期になるわけですがajaxというキーワードで検索すると多数のサンプルや解説がでてきますのでわかりやすそうなものを漁ってみるとよいと思います。

jQueryとajaxのサンプルが載ってるこんなページなんかもよいかも知れません。

自分もWebそのものに暗くこうしたことを学び中です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/14 12:17

    コメント、ご回答ありがとうとざいます。
    ご提示いただきました、ページも是非参考にさせて頂きます。

    キャンセル

0

描写するdivを用意しておきJSでclickイベントでshow/hide等で切り替え表示すれば実現できますが
選択肢が非常に多く、表現するものが複雑なため、予めHTMLの要素にこれらを読み込ませておくのは
非現実的か思っております。 

「表現するものが複雑」がどういう複雑さかはわかりませんが、あとからJavaScriptでHTMLを挿入するならば複雑さの問題はどちらも同じではないでしょうか。わざわざ別ファイルに書き出すほうが問題が複雑になると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/14 15:19

    コメントありがとうございます。
    上記に加筆しておりますが、より具体的には外部に既に1000近くのファイルがあり、ここからユーザの選択に応じて、必要なファイルの関連するタグのnodeValueを取得します。と言ってもこのそれぞれのタグの中身も2Mを超えるようなデータのため、これを予めHTMLに読み込むべきか否かに懐疑的でした。ajaxに明るくないため、それと比較してどのように相違するかは未だ分かりませんが、私個人の印象としては、ページを遷移せずにこの必要タグ部分だけを取得しにいくため、処理の負担が大きく相違するのではないかと想像をした次第でございます。もちろん、実際にajaxでの処理はそのようなものではないという可能性もございますが。
    宜しくお願い申し上げます。

    キャンセル

  • 2017/04/14 15:39

    文字列で2Mbyteの分量ならページを普通に移動するほうが良いとは思います。それか、「1000近くのファイル」の特定のファイルを取得するページを作って、それをiframe内に表示させるとかでしょうか。(選択したタイミングでiframeを書き換える)

    キャンセル

  • 2017/04/14 15:49

    コメントありがとうございます。
    なるほど、承知を致しました。そのような発想に至らなかったため、大変助かります。
    宜しくお願い申し上げます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る