自動スクロール (kaminari×jscroll)

###実現したいこと
現在kaminariを利用してページネーションを取り入れました。
「もっとみる」ボタンで次のページを表示できるの仕様ですが、
クリックなくして、次のページを表示したいです。

参考にしたサイト↓
https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7

「もっと見る」を実装しているコード（下記コード追加前のコードです）↓
https://teratail.com/questions/237863

下記コードで反応が全く得られないので、解決したいです。
Rails -v 5.2.1
ruby -v 2.5.0p0
###コード
application.html.erb

view
1<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>

/assets/javascripts/jquery.jscroll.min.js

js
1!function(m){"use strict";m.jscroll={defaults:{debug:!1,autoTrigger:!0,autoTriggerUntil:!1,loadingHtml:"<small>Loading...</small>",loadingFunction:!1,padding:0,nextSelector:"a:last",contentSelector:"",pagingSelector:"",callback:!1}};
2#省略（参考サイトのgitよりダウンロード）

application.js

js
1//= require activestorage
2//= require turbolinks
3//= require_tree .
4//= require jquery
5//= require jquery_ujs
6//= require jquery.jscroll.min.js #こちらに追加
7//= require spin
8//= require jquery.spin
9$(document).on('turbolinks:load', function() {
10  $(function() {
11    $('.jscroll').jscroll({
12      contentSelector: '.itemitem',
13      nextSelector: 'span.next:last a'
14    });
15  });
16})

index.html.erb

view
1<div class="items_center">
2        <span><%= link_to_next_page @posts, 'もっと見る',class: 'items_btn', remote: true, id: 'more_link' %></span>
3      </div>

_items.html.erb

view
1<ul class="itemitem jscroll">
2<% @posts.each do |post| %>
3  <%= post.title %>
4<% end %>
5</ul>

###追記
コンソールにて、

Error
1jquery.jscroll.min.self-320f80a26ab25dd3acd45f04faa1a57634af0c7ecf542282bc101519965447e0.js?body=1:13 Uncaught ReferenceError: jQuery is not defined
2    at jquery.jscroll.min.self-320f80a26ab25dd3acd45f04faa1a57634af0c7ecf542282bc101519965447e0.js?body=1:13

Error
1Uncaught ReferenceError: browser is not defined
2    at HTMLDocument.<anonymous> (front.js:8)

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MyApplication</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>
  </head>
  <body>
    <header>
      <ul class="header-menus">
          <li>
            <%= link_to "/posts/index", :method => :get do %>
            <i class="fa fa-list header-icon-size"></i>Menu<% end %>
          </li>
      </ul>
    </header>
    <% if flash[:notice] %>
      <div class="flash">
        <%= flash[:notice] %>
      </div>
    <% end %>
    <%= yield %>
    <footer>
    </footer>
  </body>
</html>

###追記2
下記の実行の上、表示されているエラー
・//= require jquery.jscroll.min.jsを削除
・bundle install
・サーバー再起動

###追記3

gem
1source 'https://rubygems.org'
2git_source(:github) { |repo| "https://github.com/#{repo}.git" }
3
4ruby '2.5.0'
5
6# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
7gem 'rails', '~> 5.2.1'
8# Use Puma as the app server
9gem 'puma', '~> 3.11'
10# Use SCSS for stylesheets
11gem 'sass-rails', '~> 5.0'
12# Use Uglifier as compressor for JavaScript assets
13gem 'uglifier', '>= 1.3.0'
14# See https://github.com/rails/execjs#readme for more supported runtimes
15# gem 'mini_racer', platforms: :ruby
16gem 'therubyracer', platforms: :ruby
17# デフォルトの言語を日本語に設定する
18gem 'rails-i18n', '~> 5.1'
19# Use CoffeeScript for .coffee assets and views
20gem 'coffee-rails', '~> 4.2'
21# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
22gem 'turbolinks', '~> 5'
23# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
24gem 'jbuilder', '~> 2.5'
25# Use Redis adapter to run Action Cable in production
26# gem 'redis', '~> 4.0'
27# Use ActiveModel has_secure_password
28gem 'bcrypt', '~> 3.1.7'
29# Use ActiveStorage variant
30# gem 'mini_magick', '~> 4.8'
31# consoleのエラー対応
32gem 'rb-readline'
33# Use Capistrano for deployment
34# gem 'capistrano-rails', group: :development
35gem 'carrierwave'
36# 写真保存用
37gem 'fog-aws'
38# 「fog-aws」はS3へのアップロードを簡易的におこなうために必要
39gem 'rmagick'
40# ImageMagickを操作してサムネイル画像などを作成するために必要
41gem 'jquery-rails'
42gem 'jquery-ui-rails'
43# spin.jsを利用するため
44gem 'spinjs-rails'
45# ページレーションのgem
46gem 'kaminari'
47
48# Reduces boot times through caching; required in config/boot.rb
49gem 'bootsnap', '>= 1.1.0', require: false
50
51group :development, :test do
52  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
53  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
54end
55
56group :development do
57  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
58  gem 'web-console', '>= 3.3.0'
59  gem 'listen', '>= 3.0.5', '< 3.2'
60  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
61  gem 'spring'
62  gem 'spring-watcher-listen', '~> 2.0.0'
63  # Use sqlite3 as the database for Active Record
64  # gem 'sqlite3'
65  # generateする際にエラーでこちらのバージョンを使うよう指示があった
66  gem 'sqlite3', '~> 1.3.6'
67
68end
69
70group :test do
71  # Adds support for Capybara system testing and selenium driver
72  gem 'capybara', '>= 2.15'
73  gem 'selenium-webdriver'
74  # Easy installation and use of chromedriver to run system tests with Chrome
75  gem 'chromedriver-helper'
76  # Use sqlite3 as the database for Active Record
77  # gem 'sqlite3'
78  # generateする際にエラーでこちらのバージョンを使うよう指示があった
79  gem 'sqlite3', '~> 1.3.6'
80end
81
82group :production do
83  gem 'pg'
84  gem 'rails_12factor'
85end
86
87# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
88gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

###追記4
エラーfront.js:8をクリックし、表示される文

/*
 *  This file is part of TokyoLoader <https://tokyoloader.com/>
 *  Due to restrictions of Google's terms, downloading videos from YouTube is disabled in this extension.
 */

'use strict';
document.addEventListener("DOMContentLoaded", function(event) {
  const WebExtensions = navigator.userAgent.includes("Chrome") ? chrome : browser; #こちらに赤字エラー
  const CMD_GET_SCRIPTS = "cmd_get_scripts";
.
. #省略
.

fontawesomeの定義
application.html.erb

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
#その下にjscollのscriptを記述

###やってみたこと
・//= require jquery.jscroll.min.jsの配置順を変えてみた
他でサイト参考に。

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示いただいたviewを見る限りjQueryの設定がきちんとできていないような気がします。
参考サイトにも記載がありますが、下記はassets/javascripts/application.jsに記載をします。

Ruby
1//= require jquery.jscroll.min.js

またjQueryは、Railsのバージョン5か6かによって設定方法が異なりますので、こちらも確認をお願いします。
（参考サイトのjQueryのリンク先はRails5の設定となります。）

追記（2020/02/21 0:10）

とりあえず下記の状態が正しいかと思いますので、こちらをベースに進めたいですね。
application.js

JavaScript
1//= require activestorage
2//= require turbolinks
3//= require_tree .
4//= require jquery
5//= require jquery_ujs
6//　　　　　　　　　　　　　　　 #←jquery.jscroll.min.jsは削除
7//= require spin
8//= require jquery.spin

application.html.erb

erb
1  <head>
2    <title>MyApplication</title>
3    <%= csrf_meta_tags %>
4    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
5    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
6    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>
8  </head>

あと/assets/javascripts/jquery.jscroll.min.jsは削除してください。

投稿2020/02/19 19:37

編集2020/02/20 15:15

no1knows

総合スコア3365

tomtom1

2020/02/20 08:39

大変申し訳ありません！質問の内容に誤りがありました。//= require jquery.jscroll.min.jsは、ちゃんとapplication.jsに記述されていました。また、Rails -v は、5.2.1です！質問を修正し、追加情報を加えました！

no1knows

2020/02/20 09:44

//= require jquery.jscroll.min.jsは、//= require jqueryより下に記載して下さい。これは読み込み順を指定するもので、jscrollをjQueryより先に読み込むとソースを動かす本体であるjQueryがないためにエラーがでてしまいます。上記で動かないようであれば、GoogleChromeの開発者ツールの検証で、コンソールにエラーが出ているかと思います。そちらも追記いただければより正確な回答ができるかと思います。

tomtom1

2020/02/20 11:11

勉強になります。ありがとうございます！順番を変更しました！また、コンソールでエラーが出ておりました。 jQuery is not definedとbrowser is not definedです。詳細を追記致します。

tomtom1

2020/02/20 11:29

自分でも調べていますが、まだ解決できておりません。申し訳ありません。ご質問ですが、正確に言うと、jquery.jscroll.min.jsをgitでダウンロードしたのではなく、gitのjquery.jscroll.min.jsの中身をコピーし、自分のPCでjquery.jscroll.min.jsファイルを作成し、コピペしたのですが、こちらは問題はなりでしょうか？

no1knows

2020/02/20 11:31

ダウンロードは問題ないと思います。 application.html.erbのコードを全て追記ください。

no1knows

2020/02/20 11:33

ごめんなさい。自分で作ったjquery.jscroll.min.jsファイルは必要ないですね。下記にて取得しているので <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>

tomtom1

2020/02/20 11:44

そうなんですね！jquery.jscroll.min.jsファイルは必要ないこと承知しました。解決後、削除します。 application.html.erbを追記しました！宜しくお願いします。

no1knows

2020/02/20 11:52

追加でこちらも削除して、//= require jquery.jscroll.min.js #こちらに追加念の為、ターミナルでbundle installをお願いします。サーバー再起動したあとにGoogleChromeの開発者ツールのエラーを教えて下さい。

tomtom1

2020/02/20 12:04

ありがとうございます。追記２に情報を加えました。宜しくお願いします。

no1knows

2020/02/20 12:08

ちょっとそもそもなんですが、Gemfileにgem "jquery-rails"ってありますよね？

tomtom1

2020/02/20 12:16

はい、入っています！ jqueryまわりだと、下記のgemが入っています。 gem 'jquery-rails' gem 'jquery-ui-rails' gem 'spinjs-rails'

no1knows

2020/02/20 12:27

お手数ですが、Gemfile.rbも追記いただけますか？

no1knows

2020/02/20 12:46

ひとまず現状の切り分けとしては、jQueryが適切に設定されていないことにより、読み込みでエラーとなっている形です。 jQueryをベースにしてjscrollは動くので、まずjQueryの設定をしないといけないです。手元でjqueryとjscrollのファイルをコメントしたとおりに設定しましたが、jQueryのエラーは表示されませんでした。（無限スクロールは設定していません。）

tomtom1

2020/02/20 12:54

度々ありがとうございます。 Gemfile.rbを追記しました！

tomtom1

2020/02/20 12:59

なるほどです。現状、全ページで同様のエラーが出るので、application.html.erbが怪しいと思っています。また、/assets/javascripts/jquery.jscroll.min.jsをしましたところ下記のエラーが発生しました。 Sprockets::FileNotFound in Posts#index これは、application.html.erbに記載のscriptがしっかり読み取れていないからこのような現状になるのでしょうか。

no1knows

2020/02/20 13:02

ひとまずそれはこれですかね？ https://ja.stackoverflow.com/questions/18042/gem%E8%BF%BD%E5%8A%A0%E6%99%82%E3%81%ABsprocketsfilenotfound

tomtom1

2020/02/20 13:23

拝見しました！しかし、やはり/assets/javascripts/jquery.jscroll.min.jsを削除してしまうと同様のエラーが出てしまいます。念の為、bundle install server再起動もしましたが。逆に、/assets/javascripts/jquery.jscroll.min.jsをそのままにして、scriptを削除すると、先ほどのエラーは発生しないです。（しかし、コンソールのjQuery is not definedは、存在しています）

tomtom1

2020/02/20 13:54

あと、head内にんscriptを記述しているのですが、こちらは問題ないでしょうか。 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script> </head

no1knows

2020/02/20 15:20

> やはり/assets/javascripts/jquery.jscroll.min.jsを削除してしまうと同様のエラーが出てしまいます。上記は、application.jsにjquery.jscroll.min.jsを記載していたことで、ファイルがないよというエラーがでているだけです。追記にも2020/02/20 20:52にも書いていますが、application.jsのjscrollは削除して下さい。

tomtom1

2020/02/20 15:59

追記ありがとうございます。現状エラーを記載します。 jquery.jscroll.min.jsと/assets/javascripts/jquery.jscroll.min.js 上記を削除すると、下記のようなエラーの状態です。 Uncaught ReferenceError: browser is not defined （jQuery is not definedは、無くなりました）

tomtom1

2020/02/20 16:04

ちなみにですが、何かしら思いもよらぬコードが影響を与えているかもしれないと思い、別のRailsサービスで同じ実装を行ったところ、上記と同じエラーが出ており実装できませんでした。

no1knows

2020/02/20 16:10

1歩進みましたね。そのエラーはfront.js:8になっていますか？下記を確認してみてください。 https://teratail.com/questions/183104 ちなみに関係ないかもしれませんがfont-awesomeは、どのように定義していますか？

tomtom1

2020/02/20 16:34

ありがとうございます！はい！front.js:8です。追記4に、front.js:8が指す箇所とfontawesomeの定義を加えました！

no1knows

2020/02/20 16:50

tokyoloaderっていうChrome拡張を使っていたりしますか？もしそうなら、それをOFFにしてください。その後、application.jsの$(function() {の次に $(‘body').css('background-color','orange'); を追加してみてください。もしbodyがオレンジ色になるようだとjqueryは動いていることになります。

tomtom1

2020/02/20 17:01 編集

本当になんどもありがとうございます> <！！ $(document).on('turbolinks:load', function() { $(function() { $('body').css('background-color','orange'); }); }) （コメントではインデントがうまくできていません）に書き換えましたところ、背景がオレンジになりました！また、上記の定義がなくてもエラーがあるということがわかりました！ jqueryは動いていると言うことですね！

no1knows

2020/02/20 17:07

OK！動いています！！これでやっと下記の設定スタートです！ https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85

no1knows

2020/02/20 17:07

上記リンクより上は設定完了です！

tomtom1

2020/02/20 18:34

ありがとうございます。やはりそのようにしても反応がないですね..。もう少し情報を得れてから返信したかったのですが、原因など何も収穫がなく、ご返信が遅くなる前に、取り急ぎです

tomtom1

2020/02/20 18:38

ちなみに現在上記サイトと異なる箇所としてrenderを使用していますが、 renderを無くして、その箇所にrender'items'先ファイルの記載コードを記述しても変化はありませんでした。 <div id="items"> <%= render 'items' %> </div> <%= paginate @posts %>

tomtom1

2020/02/20 19:06

本当にありがとうございます！！！ <%= paginate @posts %>が<ul class="skill-list jscroll">と</ul>内に記載されていなかったことにより、反応がえられませんでした！枠内に記述したらちゃんと反応が得られました！事細かく、エラーに対し問題点の調べ方など大変勉強になりました。ありがとうございます！

no1knows

2020/02/20 23:42

それは良かったです！今後、下記のことを気をつけていただくと良いかと思います。・一つ一つ、切り分けて動作確認を行う。（特にjQueryなど、依存しているスクリプト）・フロントエンドの動作確認は、検証ツールで行う。・開示するソースコードは省略しない。（原因が特定できていない場合）たぶん自分が何を設定しているのかきちんと理解できていないと思うので、下記記事の一般的な「Ajax処理のおさらい」の見出しの2つの図は確認しておくとよいかと思います。具体的にはRailsのフロントエンドであるビューやバックエンドのコントローラーと今回設定したJavaScript(jQuery)がどの部分の処理をしているのかです。 https://qiita.com/ka215/items/dfa602f1ccc652cf2888

行動規範の内容に同意します