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

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

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

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

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

jQuery

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

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

1回答

841閲覧

LaravelでjScrollを使用する方法

naoki_m

総合スコア29

jQueryプラグイン

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

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

jQuery

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

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2019/01/07 13:31

編集2022/01/12 10:55

前提・実現したいこと

LaravelにjScrollの導入を試みましたが、うまくいきません。
状況としては、Laravelのpagenateは動作を確認できるのですが、jScrollは動作していないようです。
パスのミスを考えましたが、該当ファイルをjs直下に設置したり、cdnを試してみましたが、どれも解決には至りませんでした。
bootstrapやjQuery、jScrollのバージョンも、様々なものを試みました。

英語や中国語で文書を読み漁りましたが、どうにも解決できません。
どうかよろしくお願いいたします。

該当のソースコード

・controller↓

php

1namespace App\Http\Controllers; 2 3use Illuminate\Http\Request; 4use App\Talk; 5 6class HomeController extends Controller 7{ 8 public function index() 9 { 10 $all_talk = Talk::where('user_id',$user->id)->paginate(30); 11 return view('home', ['all_talk' => $all_talk]); 12 } 13}

・home.blade.php↓

html

1<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 2<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 3</head> 4<body> 5 6<div class="scroll infinite-scroll"> 7 @foreach ($all_talk as $talk) 8          9        ・・・ 10 11 @endforeach 12 {{ $all_talk->links() }} 13</div> 14 15<script src="js/vendor/jquery.js"></script> 16<script src="js/vendor/what-input.js"></script> 17<script src="js/vendor/foundation.js"></script> 18<script src="js/app.js"></script> 19<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"></script> 20<script src="js/vendor/jscroll/dist/jquery.jscroll.min.js"></script> 21<script type="text/javascript"> 22 $('ul.pagination').hide(); 23 $(function() { 24 $('.infinite-scroll').jscroll({ 25 autoTrigger: true, 26 loadingHtml: '<i class="fas fa-spinner"></i>', 27 padding: 0, 28 nextSelector: '.pagination li.active + li a', 29 contentSelector: 'div.infinite-scroll', 30 callback: function() { 31 $('ul.pagination').remove(); 32 } 33 }); 34 }); 35</script> 36</body>

エラー

エラー1↓

jquery.min.js:2 Uncaught TypeError: $(...).jscroll is not a function at HTMLDocument.<anonymous> (home:) at j (jquery.min.js:2) at k (jquery.min.js:2) (anonymous) @ home:587 j @ jquery.min.js:2 k @ jquery.min.js:2 setTimeout (async) r.readyException @ jquery.min.js:2 (anonymous) @ jquery.min.js:2 j @ jquery.min.js:2 k @ jquery.min.js:2 setTimeout (async) (anonymous) @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 fire @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 k @ jquery.min.js:2 setTimeout (async) (anonymous) @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 fire @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 S @ jquery.min.js:3

エラー2↓

Uncaught SyntaxError: Unexpected token : bootstrap.min.css:6 jquery.min.js:2 jQuery.Deferred exception: $(...).jscroll is not a function TypeError: $(...).jscroll is not a function at HTMLDocument.<anonymous> (http://) at j (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999) at k (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313) undefined r.Deferred.exceptionHook @ jquery.min.js:2 k @ jquery.min.js:2 setTimeout (async) (anonymous) @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 fire @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 S @ jquery.min.js:3

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

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

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

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

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

mix-peach

2019/01/08 04:04

ブラウザの開発コンソールでエラーは出ていませんか? jscrollの参考サイトと、提示のコードを見た限りでは特に問題はないように見える(jquery本体っぽいのを2回読み込んでるのが気になる程度)ので、エラー情報とかがないと解決は難しいと思います。
naoki_m

2019/01/08 09:57

ご指摘ありがとうございます。 2つエラーがありましたので、追加いたします。 ご覧いただけますと幸いです!
naoki_m

2019/01/08 10:41

jQueryの読み込みの重複を修繕し、一つにしましたが、エラー内容は変わりませんでした
guest

回答1

0

なるほど。
よく見たら、もう1か所不思議な所がありましたね。

こちらが根本原因かと思います。

エラーの

Uncaught SyntaxError: Unexpected token : bootstrap.min.css:6

これですね。javascriptのsyntaxErrorです。

何故かcssファイルをscriptファイルとして読み込もうとしているようです。
ちょうど。jscrollのファイルを読み込む<script>タグの真上にいる

html

1<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"></script>

これですね。

javascriptのsyntaxErrorは、発生した時点で、そこから下に記述されたjavascriptの全ての読み込みをやめてしまいます。
つまり、この次の行のjscrollのscriptファイルは、読み込まれていません。

なので、パスも合ってるし、読み込んでいるはずのjscrollが、

$(...).jscroll is not a function

と、「関数じゃないよ!」とエラーになってしまっています。

不具合があると、ついつい「できないところ」だけを見てしまいがちですが、javascriptのエラーは、「そこから下のjavascriptが読み込まれなくなる」ことで、まったく関係なさそうな他の部分にまで影響を及ぼす可能性が高いです。

なので、「できないところ」だけ見ても解決できない時、
他にもエラーがあるならば、一見関係なさそうでも先にそちらを解決してみると良いかもです。

投稿2019/01/09 02:54

mix-peach

総合スコア1910

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

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

naoki_m

2019/01/11 15:09

ご回答ありがとうございます! こちら、公式サイトを参考に、jsファイルを読み込むように変更したところ、ちゃんとjscrollのファイルが読み込まれました! ですが、「Uncaught SyntaxError: Unexpected token ()」なるエラーが起きて、「 function() 」この部分に問題があるようです。 とある記事を参考に、「jQuery(function($) {})と記述した結果、上記エラーは消えるのですが、相変わらず無限スクロールは実現できませんでした。 度重なる質問で大変恐縮ですが、こちらのエラーの対処に心当たりはございませんでしょうか。 よろしくお願いいたします
mix-peach

2019/01/15 00:48

どのように修正されたのかと、function()エラーの全文を追記してもらえたら、何か分かるかもしれません・・!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問