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

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

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

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

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

Q&A

1回答

1575閲覧

infinitescrollv3で無限スクロールが動かない

Dongrill

総合スコア19

jQueryプラグイン

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

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

0グッド

0クリップ

投稿2018/05/17 09:40

編集2022/01/12 10:55

前提・実現したいこと

最新版のinfinitscrollv3でtwitterのようなスクロールを実装したいのですが動きません。
現在はphpでデータベースからデータを取得しページングを作成するというところまでは出来ております。
公式サイトを参考にしつつ下記設定を試しておりますが機能しません。
このページングを利用したinfinitscroll設定のアドバイスをいただけますと幸いです。
何卒宜しくお願い致します。

infinitscroll公式

該当のソースコード

php

1 2<head> 3<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> 4<script> 5$('#chat').infiniteScroll({ 6 path: '$page={{#}}', 7 append: '.post', 8 hideNav: '.pagination', 9 responseType: 'php' 10}); 11</script> 12</head> 13<div id="chat"> 14<div class="post"> 15 16 17 <?php 18 // PDOでDBに接続 19 $aaa_id=$_REQUEST['aaa_id']; 20 $bbb_id=$_REQUEST['bbb_id']; 21 22 $pdo=new PDO('mysql:host=localhost;dbname=xxx;charset=utf8', 'root', ''); 23 24 // GETで現在のページ数を取得する(未入力の場合は1を挿入) 25 if (isset($_REQUEST['page'])) { 26 $page = (int)$_REQUEST['page']; 27 } else { 28 $page = 1; 29 } 30 31 // スタートのポジションを計算する 32 if ($page > 1) { 33 // 例:2ページ目の場合は、『(2 × 10) - 10 = 10』 34 $start = ($page * 10) - 10; 35 } else { 36 $start = 0; 37 } 38 39 // postsテーブルから10件のデータを取得する 40 $posts = $pdo->prepare("select * from users inner join posts on users.user_id = posts.user_id where posts.circle_id={$circle_id} order by posts.create_date desc limit {$start},10"); 41 $posts->execute(); 42 $posts = $posts->fetchAll(PDO::FETCH_ASSOC); 43 44 foreach ($posts as $row) { 45 46 47 48 49 echo '<p class="clearfix"> 50 <div class="chat-text clearfix">'; 51 52 53 if (empty($row['icon'])) { 54 55 echo '<div class="icon"><img src="../img/default_icon.svg" alt=""></div>'; 56 } else { 57 58 echo '<div class="icon"><img src="../img/'.$row['username'].'_'.$row['user_id'].'.jpg" alt=""></div>'; 59 } 60 61 62 63 echo '<div class="chatMessage"><span class="name">'.$row['username'].'</span> 64 <p class="date">'.$row['create_date'].'</p> 65 <p>'.$row['posts_article'].'</p> 66 </div> 67 </div> 68 </p>'; 69 } 70 71 // postsテーブルのデータ件数を取得する 72 $page_num = $pdo->prepare("SELECT COUNT(*) post_id FROM posts"); 73 $page_num->execute(); 74 $page_num = $page_num->fetchColumn(); 75 76 // ページネーションの数を取得する 77 $pagination = ceil($page_num / 10); 78 79 ?> 80 81 <?php for ($x=1; $x <= $pagination ; $x++) { 82 echo '<div class="pagination"><a class="pagination__next" href="./index.php?aaa_id='.$aaa_id.'&bbb_id='.$bbb_id.'&page='.$x.'">next</a></div>'; 83 } // End of for 84 ?> 85 86 </div> 87</div>

補足情報(FW/ツールのバージョンなど)

PHP のバージョン: 7.1.13

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

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

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

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

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

guest

回答1

0

jQuery本体読み込んでいますか?提示コード内容には記述がないようですが。

投稿2018/05/19 10:04

m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問