前提・実現したいこと
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