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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

2428閲覧

もっと見るボタンの要素が表示されたら、次のページを表示する(kaminari)

tomtom1

総合スコア168

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/01/27 11:57

###実現したいこと
gem kaminariを活用して「もっと見るボタン」で、ページネーションをしています。
現在、「もっと見るボタン」をクリックしたら、さらに20件表示される仕様です。

今回、クリックではなく、スクロールしてボタンが表示されたら、次の20件が表示できるようにしたいです。

色々と調べたらinview.jsを活用できるのかなと思いましたが、
kaminariを仕様したページネーションに対し、inviewを仕様する方法が見つかりません。
https://stand-4u.com/web/javascript/inview.html

jsはあまり触ったことがないため、深く理解できずにいますが、どのようなやりしたら叶いますでしょうか?
そもそも、gem kaminari × inview.js は、できないのでしょうか?

###実現したいこと
index.html.erb

view

1 <div class="users-index"> 2 <div id="userindex"> 3 <%= render 'userindex' %> 4 </div> 5 <div class="items_center"> 6 <span><%= link_to_next_page @users, 'もっと見る',class: 'items_btn', remote: true, id: 'more_link' %></span> 7 </div> 8 </div>

_user.index.html.erb

view

1<% @users.each do |user| %> 2 <div class="users-index-item"> 3 <div class="user-left"> 4 <%= image_tag "/user_images/default_user.jpg" %> 5 </div> 6 <div class="user-right"> 7 <%= user.name %> 8 </div> 9 </div> 10<% end %>

index.js.erb

js

1$('#userindex').append("<%= escape_javascript(render 'userindex', object: @users) %>") 2$("#more_link").replaceWith("<%= escape_javascript(link_to_next_page(@users, 'もっと見る',class: 'items_btn', remote: true, id: 'more_link')) %>");

Controller

1class UsersController < ApplicationController 2 def index 3 @users = User.page(params[:page]).per(20) 4 respond_to do |format| 5 format.html 6 format.js { @users } 7 end 8 end

###やってみたこと
application.html.erb

view

1<script src="common/js/jquery-1.9.1.min.js"></script> #追加 2<script type="text/javascript" src="common/js/jquery.inview.js"></script> #追加

index.js.erb

js

1$('#userindex').on('inview', function() { 2// 要素が画面に表示された時に実行する処理を記述 3 $('#userindex').append("<%= escape_javascript(render 'userindex', object: @users) %>") 4 $("#more_link").replaceWith("<%= escape_javascript(link_to_next_page(@users, 'もっと見る',class: 'items_btn', remote: true, id: 'more_link')) %>"); 5});

そもそも書き方が違うのかわかりません。
ただクリックのページネーションすらできなくなってしまいました。
お分かりの方ぜひ宜しくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

inview.jsのことはわからないので恐縮ですが、下記の検索結果で期待することが実現できるかと思います。

「kaminari 自動読み込み」の検索結果:google

投稿2020/01/27 23:10

no1knows

総合スコア3365

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

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

tomtom1

2020/02/19 15:37

ありがとうございます!色々と調べてみまして、jscrollで解決している方々が多いので、それで挑戦したいと思います。 まだ解決できておりませんので、新しい質問を作成しました! もしよければこちらもご確認頂ければ幸いです! https://teratail.com/questions/242392?modal=q-comp
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問