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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3228閲覧

infinite-scrollの動的ページの指定方法について

workingcore

総合スコア6

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/05/08 03:06

編集2017/05/10 01:48

###前提・実現したいこと
jsライブラリ、infinite-scrollを用いて無限スクロールの実装を行っています
https://github.com/infinite-scroll/infinite-scroll

静的ページでの実装はできたのですが、今回実現したいことは動的ページを表示することです
(/style/include/template/Entry_SummaryAd/pc-entry.html/page/5/,/style/include/template/Entry_SummaryAd/pc-entry.html/page/3/など)

読み込むページ数はマックス2ページです

どなたか上記についての指定方法をご存知の方がいらしましたらご教授いただけないでしょうか

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード
html

<div id="main">
<section id="content"> <h3>DEMO</h3> <div class="post"> <p>demo1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi error quas accusantium sunt aliquam tempora asperiores. Vel quia voluptatum nihil animi ratione autem cum illum culpa libero alias accusamus corporis consequuntur doloremque aliquid placeat esse rerum deserunt eaque est natus voluptate necessitatibus perferendis dignissimos iure veniam error aut deleniti obcaecati ea optio aliquam laudantium dolore aspernatur expedita odit nulla assumenda modi quod laboriosam sequi labore fugiat.</p> <p>Quia sequi tempore ad saepe voluptas quaerat facilis consectetur ullam quam esse ipsa ipsum. Expedita nulla facilis mollitia blanditiis vitae ad dolorum quasi incidunt dignissimos labore animi laudantium similique beatae eveniet fuga in laboriosam aliquam quo autem velit molestias sunt quam nemo enim tempore saepe ullam optio nihil iste architecto accusamus repellendus dolores eaque iusto culpa nobis asperiores temporibus rem explicabo possimus! Nisi consectetur soluta vero facere aut nemo minus vel laudantium cupiditate dolore quaerat itaque neque saepe ab libero fugit ex voluptatibus dolor quas veniam est ipsa eveniet provident aperiam nesciunt consequatur eius iusto inventore qui nihil animi ea debitis deleniti modi nobis cumque ut placeat quasi ad accusamus laborum illo.</p> <p> Amet nihil in cupiditate quis adipisci natus aut veritatis maxime ad corporis beatae maiores saepe illo nesciunt voluptate excepturi possimus tempore! Laborum?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi error quas accusantium sunt aliquam tempora asperiores. Vel quia voluptatum nihil animi ratione autem cum illum culpa libero alias accusamus corporis consequuntur doloremque aliquid placeat esse rerum deserunt eaque est natus voluptate necessitatibus perferendis dignissimos iure veniam error aut deleniti obcaecati ea optio aliquam laudantium dolore aspernatur expedita odit nulla assumenda modi quod laboriosam sequi labore fugiat.</p> </div> <p class="navigation"><a href="index2.html">次のページへ</a></p> </section>
</div>

script

<script src="jquery.infinitescroll.min.js"></script>
<script> $(function(){ $('#content').infinitescroll({ navSelector : ".navigation", nextSelector : ".navigation a", itemSelector : ".post", maxPage : 3, dataType : "html", animate:true, extraScrollPx: 200, loading : { img : "js/loading.gif", finishedMsg : "全ての読み込みが終了" } }, function(newElements) { $(newElements).hide().delay(100).fadeIn(600); // フェードイン処理 $(".navigation").appendTo("#content").delay(300).fadeIn(600); // ナヴィゲーションボタンの移動 }); $('#content').infinitescroll('unbind'); // 初期化 $(".navigation a").click(function(){ $('#content').infinitescroll('retrieve'); return false; }); });
</script>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/05/09 10:36

分からない部分はどこですか? ご提示のソースコードでは動かないのでしょうか? その場合、エラーメッセージなどは表示されていますか?
workingcore

2017/05/10 01:49 編集

わかりづらくすみません。。>ご提示のソースコードでは動かないのでしょうか?→.htmlや.phpや.jsonファイルを指定する形式であれば動きます。 >分からない部分はどこですか?→/style/include/template/Entry_SummaryAd/pc-entry.html/page/3/など拡張子を持たない動的ページの指定方法となります。 >その場合、エラーメッセージなどは表示されていますか?→全て読み込みが完了しました。とでるので正常には動いているが取得できていない状態なのかなと思っています
Lhankor_Mhy

2017/05/10 02:45

拡張子を持つ持たない、というのはおそらく関係がないと思います。なお、エラーメッセージとはjavascriptのエラーメッセージのことです。ブラウザの開発者ツールのコンソールに表示されますので、確認してご提示いただけますか?
workingcore

2017/05/10 02:57

ご確認ありがとうございます。chrome/firefoxで開発者ツール→コンソールを確認したのですがエラーメッセージは表示されていませんでした。
workingcore

2017/05/10 02:58

scriptの方でdataType : "html", というのをデフォルトで指定しているのですが何か関連性があるのでしょうか
Lhankor_Mhy

2017/05/10 03:56

関連性はないと思います。/style/include/template/Entry_SummaryAd/pc-entry.html/page/3/ を直接表示した場合は問題なく表示されていますか?
workingcore

2017/05/10 04:00 編集

いえ、ローディング画像が回って「全ての読み込みが完了しました」とでて、/style/include/template/Entry_SummaryAd/pc-entry.html/page/3/の内容は全く表示されない(コンテンツ内に変化のない状態)です。
Lhankor_Mhy

2017/05/10 04:04

/style/include/template/Entry_SummaryAd/pc-entry.html/page/3/ のページに直接アクセスした場合の応答についてお尋ねしていますが、その内容で間違いありませんか? ということは、infinite-scrollを使っているページをinfinite-scrollで読み込んでいる、という理解で間違いありませんか?
workingcore

2017/05/10 04:05

勘違いしておりすみません。/style/include/template/Entry_SummaryAd/pc-entry.html/page/3/ のページに直接アクセスした場合正常に表示されます
workingcore

2017/05/10 04:07 編集

infinite-scrollを使っているページに/style/include/template/Entry_SummaryAd/pc-entry.html/page/3/を読み込む仕様なので重複して利用していないです。ややこしい言い回しですみません
Lhankor_Mhy

2017/05/10 04:08

わかりました。そのページには .navigation や .post はきちんと存在していますか?
workingcore

2017/05/10 04:12

はい。存在しています(静的ページの読み込みは問題ないので記述も間違っていないと思います)
Lhankor_Mhy

2017/05/10 04:14

すみません、あいまいに書いてしまいましたので意図が伝わっていないかもしれませんので、再度お尋ねします。/style/include/template/Entry_SummaryAd/pc-entry.html/page/3/ にも .navigation や .post はきちんと存在していますか?
workingcore

2017/05/10 04:21

書いていませんでした・・!担当が違うので試してもらいます(2日程度お時間いただければと思います)。結果またご連絡させていただきます
workingcore

2017/05/10 05:03

担当者が意外と早く対応してくれて実現できました!イージーミスでしたがご意見頂戴し本当に助かりました。また何かありましたらご教授いただけますと幸いです。ありがとうございました!
Lhankor_Mhy

2017/05/10 05:22

ご解決されてなによりです。よろしければ、ヘルプページ( https://teratail.com/help )をご参照の上、自己解決済みにしていただけますと助かります。
guest

回答1

0

自己解決

読み込むファイルへの記述漏れ(.post/.navigation)が原因でした

投稿2017/05/10 06:08

workingcore

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問