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

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

ただいまの
回答率

91.06%

  • JavaScript

    13278questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7229questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4610questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

画面の一部を別のページに更新する

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 109

tarofess

score 112

現在ボタンをクリックすると画面の一部分を別のページに差しかえるコードを書いているのですが、うまくいきません。
別のページを差し込む部分のコードは以下のようになっています。

<body>
    <div id="sub">
      <?php include('new.php'); ?>
    </div>


そしてボタンのクリックイベント部分の処理は以下のようになっています。

$('#sub').load('stock.php');


これでページが差しかわると思っていたのですが、ページは変わりませんでした。
どこが間違っているのでしょうか?どなたか分かる方がいれば教えていただきたいです。よろしくお願いします。

//////////////////追記/////////////////////

詳細なコードを追記します。
まずサイトに訪れた時に表示されるページは以下のようになっています。

<body>
    <?php include_once('header.html'); ?>
    <?php include('categories.html'); ?>
    <div id="sub">
      <?php include('new.php'); ?>
    </div>
    <?php include_once('footer.html'); ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
      $(function(){
        $('#categories li').click(function() {
          switch ($(this).index()) {
            case 0:

              break;
            case 1:
              $('#sub').load('stock.php');
              break;
            default:
              break;
          }
        });
      });
    </script>
  </body>


サイトの画面左側にはBootstrapのパネルが表示されており、コードは以下のようになっています。
このパネルの項目がクリックされると画面の一部を差しかえたいです。

categories.html

<div class="container">
    <div class="row" style="padding:20px 0 0 0">
        <div class="col-md-3">
            <div class="panel panel-success" id="test">
                <div class="panel-heading">
                    カテゴリ
                </div>
                <ul class="nav nav-pills nav-stacked" id="categories">
                  <li id="new_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> 新着順</a></li>
                  <li id="stock_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> ストック順</a></li>
                </ul>
            </div>
        </div>


そしてこちらのコードが最初から画面に表示されているnew.phpのコードです。

        <div class="col-md-9">
          <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
            <h1><small>新着順</small></h1>
          </div>
          <div class="col-md-4">
              <div class="thumbnail" style="text-align:center;padding-top:10px;">
                  <a href="">
                      <img src="150x150.jpg">
                  </a>
                  <div class="caption">
                      <p><b>Caption</b></p>
                      <p>this is a caption.</p>
                      <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
                  </div>
              </div>
          </div>
        </div>
    </div>
</div>


そしてこちらがパネルが押されたら表示させようとしているstock.phpのコードです。

        <div class="col-md-9">
          <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
            <h1><small>ストック順</small></h1>
          </div>
          <div class="col-md-4">
              <div class="thumbnail" style="text-align:center;padding-top:10px;">
                  <a href="">
                      <img src="150x150.jpg">
                  </a>
                  <div class="caption">
                      <p><b>Caption</b></p>
                      <p>this is a caption.</p>
                      <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
                  </div>
              </div>
          </div>
        </div>
    </div>
</div>

//////////////////追記/////////////////////

コードの指摘を受けて、ファイル内でタグを閉じるように以下のようにコードを変更しました。

index.php

<body>
    <?php include_once('header.html'); ?>
    <?php include('categories.php'); ?>
    <?php include_once('footer.html'); ?>


categories.php

<div class="container">
    <div class="row" style="padding:20px 0 0 0">
        <div class="col-md-3">
            <div class="panel panel-success" id="test">
                <div class="panel-heading">
                    カテゴリ
                </div>
                <ul class="nav nav-pills nav-stacked" id="categories">
                  <li id="new_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> 新着順</a></li>
                  <li id="stock_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> ストック順</a></li>
                  <li id="total_ranking_panel"><a href=""><i class="glyphicon glyphicon-pencil"></i> 全体ランキング</a></li>
                  <li id="week_ranking_panel"><a href=""><i class="glyphicon glyphicon-download"></i> 週間ランキング</a></li>
                  <li id="month_ranking_panel"><a href=""><i class="glyphicon glyphicon-leaf"></i> 月間ランキング</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-9">
          <div id="sub">
            <?php include('new.php'); ?>
          </div>
        </div>
    </div>
</div>


new.php

<div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
  <h1><small>新着順</small></h1>
</div>
<div class="col-md-4">
    <div class="thumbnail" style="text-align:center;padding-top:10px;">
        <a href="">
            <img src="150x150.jpg">
        </a>
        <div class="caption">
            <p><b>Caption</b></p>
            <p>this is a caption.</p>
            <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
        </div>
    </div>
</div>


stock.php

<div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
  <h1><small>ストック順</small></h1>
</div>
<div class="col-md-4">
    <div class="thumbnail" style="text-align:center;padding-top:10px;">
        <a href="">
            <img src="150x150.jpg">
        </a>
        <div class="caption">
            <p><b>Caption</b></p>
            <p>this is a caption.</p>
            <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
        </div>
    </div>
</div>


すると、パネルをクリックするとstock.phpの「ストック順」という文言が画面に一瞬だけ表示されるのですが、その一瞬後にまたnew.phpの「新着順」という文言に戻ってしまいます。
一瞬だけstock.phpがロードできているような挙動なのですが、呼び出し方が間違っているのでしょうか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/01/14 12:32

    書かれている状況が再現するコード(HTML/PHP/JavaScriptなど)を過度な省略せずに提示されたほうが回答を得やすいと思います。

    キャンセル

  • tarofess

    2018/01/14 13:08

    詳細なコードを追記しました。

    キャンセル

回答 2

+1

クリックイベント時にreturn false、もしくはpreventDefault()を入れないとリロード走っちゃうんでは?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/14 17:42

    ご回答ありがとうございます。
    はい、return falseを入れるとリロードされずにそのままページが表示されました。

    キャンセル

checkベストアンサー

0

switch に入れないで試してみては?もしそれでいけ無いならエラーを確認してみてください。

【【初心者向け】コンソールによるJavascriptのエラー表示方法】
https://eng-entrance.com/javascript-display-error


試していませんが、多分ここではないかと思います。

// $(this).index()
// ↓
   $('#categories li').index(this);

【jQueryのindex()で順番を取得する】
http://www.flatflag.nir87.com/index-2026

【.index() | jQuery API Documentation】
https://api.jquery.com/index/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/14 13:37

    ご回答ありがとうございます。
    switch文は既存のコードで動作しています。試しにalertを出すと条件ごとに適切なalertが表示されました。
    そしてChromeのコンソールでエラーを確認してみたのですが、new.phpとstock.phpの<img src="150x150.jpg">の行の画像が見つからないというエラーしか表示されていませんでした。

    キャンセル

  • 2018/01/14 13:45

    そのエラーであれば、loadできていますね。HTMLの開始タグと閉じタグの数があっていないので、意図通りには出力されていないだけでは無いかと思います。デベロッパーツールでHTMLの状況を確認してみてはいかがでしょう。

    キャンセル

  • 2018/01/14 14:09

    HTMLエラーチェッカーを見つけてタグの閉じ忘れがないか調べてみました。
    しかし「タグはおそらく完璧です」と表示されたので、多分タグの閉じ忘れはないのではないかと思います...。

    キャンセル

  • 2018/01/14 15:19

    new.phpの時点で2個閉じタグが多いです。

    キャンセル

  • 2018/01/14 16:32

    2個閉じタグが多いというのは、new.phpの一つ上でincludeされているcategories.htmlの<div class="container">と<div class="row">の分です。実際にnew.phpの閉じタグを2個のけると「タグが閉じていません」というエラーが表示されてしまいます。

    キャンセル

  • 2018/01/14 16:38

    下記のようにするならその分割方法がそもそもおかしいです。
    <div id="sub">
    <?php include('new.php'); ?>
    </div>
    置き換えることを前提にする部分についてはHTMLのタグはまたがらないように設計すべきです。loadでの呼び出し/追加時に多い閉じタグなどは追加されません。(少なくとも追加する部分のHTMLがタグの不足が無い状態のものが追加されます)

    キャンセル

  • 2018/01/14 17:12

    タグがファイル内で不足していればloadでは正常な動作にならないのですね。
    それぞれのファイルでタグが不足することがないようにコードを変更しました。

    キャンセル

  • 2018/01/14 17:16

    追記確認しました。多分aタグでボタンにしているためにページが移動しているのだと思われます。
    $('#categories li').click(function() {
    switch ($(this).index()) {
    case 0:

    break;
    case 1:
    $('#sub').load('stock.php');
    break;
    default:
    break;
    }
    return false; // これを追加してください。
    });

    キャンセル

  • 2018/01/14 17:41

    return falseを追加するとうまくいきました!
    最後までお付き合いいただき誠にありがとうございます。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    13278questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7229questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4610questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。