Q&A
書かれている状況が再現するコード（HTML/PHP/JavaScriptなど）を過度な省略せずに提示されたほうが回答を得やすいと思います。
現在ボタンをクリックすると画面の一部分を別のページに差しかえるコードを書いているのですが、うまくいきません。
別のページを差し込む部分のコードは以下のようになっています。
html
1<body> 2 <div id="sub"> 3 <?php include('new.php'); ?> 4 </div>
そしてボタンのクリックイベント部分の処理は以下のようになっています。
javascript
1$('#sub').load('stock.php');
これでページが差しかわると思っていたのですが、ページは変わりませんでした。
どこが間違っているのでしょうか？どなたか分かる方がいれば教えていただきたいです。よろしくお願いします。
//////////////////追記/////////////////////
詳細なコードを追記します。
まずサイトに訪れた時に表示されるページは以下のようになっています。
html
1<body> 2 <?php include_once('header.html'); ?> 3 <?php include('categories.html'); ?> 4 <div id="sub"> 5 <?php include('new.php'); ?> 6 </div> 7 <?php include_once('footer.html'); ?> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 9 <script src="js/bootstrap.min.js"></script> 10 <script> 11 $(function(){ 12 $('#categories li').click(function() { 13 switch ($(this).index()) { 14 case 0: 15 16 break; 17 case 1: 18 $('#sub').load('stock.php'); 19 break; 20 default: 21 break; 22 } 23 }); 24 }); 25 </script> 26 </body>
サイトの画面左側にはBootstrapのパネルが表示されており、コードは以下のようになっています。
このパネルの項目がクリックされると画面の一部を差しかえたいです。
categories.html
html
1<div class="container"> 2 <div class="row" style="padding:20px 0 0 0"> 3 <div class="col-md-3"> 4 <div class="panel panel-success" id="test"> 5 <div class="panel-heading"> 6 カテゴリ 7 </div> 8 <ul class="nav nav-pills nav-stacked" id="categories"> 9 <li id="new_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> 新着順</a></li> 10 <li id="stock_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> ストック順</a></li> 11 </ul> 12 </div> 13 </div>
そしてこちらのコードが最初から画面に表示されているnew.phpのコードです。
php
1 <div class="col-md-9"> 2 <div class="page-header" style="margin-top:-30px;padding-bottom:0px;"> 3 <h1><small>新着順</small></h1> 4 </div> 5 <div class="col-md-4"> 6 <div class="thumbnail" style="text-align:center;padding-top:10px;"> 7 <a href=""> 8 <img src="150x150.jpg"> 9 </a> 10 <div class="caption"> 11 <p><b>Caption</b></p> 12 <p>this is a caption.</p> 13 <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p> 14 </div> 15 </div> 16 </div> 17 </div> 18 </div> 19</div> 20
そしてこちらがパネルが押されたら表示させようとしているstock.phpのコードです。
html
1 <div class="col-md-9"> 2 <div class="page-header" style="margin-top:-30px;padding-bottom:0px;"> 3 <h1><small>ストック順</small></h1> 4 </div> 5 <div class="col-md-4"> 6 <div class="thumbnail" style="text-align:center;padding-top:10px;"> 7 <a href=""> 8 <img src="150x150.jpg"> 9 </a> 10 <div class="caption"> 11 <p><b>Caption</b></p> 12 <p>this is a caption.</p> 13 <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p> 14 </div> 15 </div> 16 </div> 17 </div> 18 </div> 19</div> 20
//////////////////追記/////////////////////
コードの指摘を受けて、ファイル内でタグを閉じるように以下のようにコードを変更しました。
index.php
html
1<body> 2 <?php include_once('header.html'); ?> 3 <?php include('categories.php'); ?> 4 <?php include_once('footer.html'); ?>
categories.php
html
1<div class="container"> 2 <div class="row" style="padding:20px 0 0 0"> 3 <div class="col-md-3"> 4 <div class="panel panel-success" id="test"> 5 <div class="panel-heading"> 6 カテゴリ 7 </div> 8 <ul class="nav nav-pills nav-stacked" id="categories"> 9 <li id="new_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> 新着順</a></li> 10 <li id="stock_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> ストック順</a></li> 11 <li id="total_ranking_panel"><a href=""><i class="glyphicon glyphicon-pencil"></i> 全体ランキング</a></li> 12 <li id="week_ranking_panel"><a href=""><i class="glyphicon glyphicon-download"></i> 週間ランキング</a></li> 13 <li id="month_ranking_panel"><a href=""><i class="glyphicon glyphicon-leaf"></i> 月間ランキング</a></li> 14 </ul> 15 </div> 16 </div> 17 <div class="col-md-9"> 18 <div id="sub"> 19 <?php include('new.php'); ?> 20 </div> 21 </div> 22 </div> 23</div>
new.php
html
1<div class="page-header" style="margin-top:-30px;padding-bottom:0px;"> 2 <h1><small>新着順</small></h1> 3</div> 4<div class="col-md-4"> 5 <div class="thumbnail" style="text-align:center;padding-top:10px;"> 6 <a href=""> 7 <img src="150x150.jpg"> 8 </a> 9 <div class="caption"> 10 <p><b>Caption</b></p> 11 <p>this is a caption.</p> 12 <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p> 13 </div> 14 </div> 15</div>
stock.php
html
1<div class="page-header" style="margin-top:-30px;padding-bottom:0px;"> 2 <h1><small>ストック順</small></h1> 3</div> 4<div class="col-md-4"> 5 <div class="thumbnail" style="text-align:center;padding-top:10px;"> 6 <a href=""> 7 <img src="150x150.jpg"> 8 </a> 9 <div class="caption"> 10 <p><b>Caption</b></p> 11 <p>this is a caption.</p> 12 <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p> 13 </div> 14 </div> 15</div>
すると、パネルをクリックするとstock.phpの「ストック順」という文言が画面に一瞬だけ表示されるのですが、その一瞬後にまたnew.phpの「新着順」という文言に戻ってしまいます。
一瞬だけstock.phpがロードできているような挙動なのですが、呼び出し方が間違っているのでしょうか？
回答2件
0
クリックイベント時にreturn false、もしくはpreventDefault()を入れないとリロード走っちゃうんでは？
投稿2018/01/14 08:25
総合スコア4267
0
ベストアンサー
switch に入れないで試してみては？もしそれでいけ無いならエラーを確認してみてください。
【【初心者向け】コンソールによるJavascriptのエラー表示方法】
https://eng-entrance.com/javascript-display-error
試していませんが、多分ここではないかと思います。
js
1// $(this).index() 2// ↓ 3 $('#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 04:26
総合スコア69400
ご回答ありがとうございます。
switch文は既存のコードで動作しています。試しにalertを出すと条件ごとに適切なalertが表示されました。
そしてChromeのコンソールでエラーを確認してみたのですが、new.phpとstock.phpの<img src="150x150.jpg">の行の画像が見つからないというエラーしか表示されていませんでした。
そのエラーであれば、loadできていますね。HTMLの開始タグと閉じタグの数があっていないので、意図通りには出力されていないだけでは無いかと思います。デベロッパーツールでHTMLの状況を確認してみてはいかがでしょう。
HTMLエラーチェッカーを見つけてタグの閉じ忘れがないか調べてみました。
しかし「タグはおそらく完璧です」と表示されたので、多分タグの閉じ忘れはないのではないかと思います...。
new.phpの時点で2個閉じタグが多いです。
2個閉じタグが多いというのは、new.phpの一つ上でincludeされているcategories.htmlの<div class="container">と<div class="row">の分です。実際にnew.phpの閉じタグを2個のけると「タグが閉じていません」というエラーが表示されてしまいます。
下記のようにするならその分割方法がそもそもおかしいです。
<div id="sub">
<?php include('new.php'); ?>
</div>
置き換えることを前提にする部分についてはHTMLのタグはまたがらないように設計すべきです。loadでの呼び出し／追加時に多い閉じタグなどは追加されません。（少なくとも追加する部分のHTMLがタグの不足が無い状態のものが追加されます）
タグがファイル内で不足していればloadでは正常な動作にならないのですね。
それぞれのファイルでタグが不足することがないようにコードを変更しました。
追記確認しました。多分aタグでボタンにしているためにページが移動しているのだと思われます。
$('#categories li').click(function() {
switch ($(this).index()) {
case 0:
break;
case 1:
$('#sub').load('stock.php');
break;
default:
break;
}
return false; // これを追加してください。
});
return falseを追加するとうまくいきました！
最後までお付き合いいただき誠にありがとうございます。
あなたの回答
tips
プレビュー
