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

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

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

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

Twitter

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

解決済

1回答

4160閲覧

RailsでTwitterみたいにページを下までスクロールすると次のページが自動的に読み込まれるようにする方法

riamk

総合スコア47

Ruby

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

Twitter

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

0クリップ

投稿2017/05/31 05:57

編集2017/06/02 12:31

###前提・実現したいこと
RailsでTwitterみたいにページを下までスクロールすると次のページが自動的に読み込まれるようしたいです。

色々と調べてみて、kaminari と Infinite Scroll で自動ページ読み込みを実装できるみたいなので、チャレンジしてみましたがうまくできませんでした。

###発生している問題・エラーメッセージ
調べて実装してみたものの正常に動かず、エラーなども出ないのでどこに原因があるのか、修正するべき部分が分かりません。

今の状況は、

このように kaminari で設定した paginate が表示されるだけで、自動スクロールでページが読み込まれるとういう部分が機能しない状態です。

該当のソースコードを記載しますので、どこか間違っている部分や、ご指摘をいただけると嬉しいです。

###該当のソースコード
index.html.erb

ruby

1<h1>Listing Shops</h1> 2 3<%= link_to 'New Shop', new_shop_path %> 4 5<table id="shops"> 6 <thead> 7 <tr> 8 <th>Name</th> 9 <th>Zipcode</th> 10 <th>Address</th> 11 <th>Tel</th> 12 <th colspan="3"></th> 13 </tr> 14 </thead> 15 16 <tbody class="page"> 17 <%= render @shops %> 18 </tbody> 19</table> 20 21<%= paginate @shops, remote: true %>

_shop.html.erb

ruby

1<tr class="shop"> 2 <td><%= shop.name %></td> 3 <td><%= shop.zipcode %></td> 4 <td><%= shop.address %></td> 5 <td><%= shop.tel %></td> 6 <td><%= link_to 'Show', shop %></td> 7 <td><%= link_to 'Edit', edit_shop_path(shop) %></td> 8 <td><%= link_to 'Destroy', shop, method: :delete, data: { confirm: 'Are you sure?' } %></td> 9</tr>

index.js.erb

$("#shops").append("<tbody class='page'><%= escape_javascript(render(@posts)) %></tbody>");

shops_controller.rb

ruby

1class ShopsController < ApplicationController 2 before_action :set_shop, only: [:show, :edit, :update, :destroy] 3 4 # GET /shops 5 # GET /shops.json 6 def index 7 @shops = Shop.page(params[:page]).per(25) 8 unless params[:page].blank? 9 render @shops, layout: false 10 end 11 end 12 13 # GET /shops/1 14 # GET /shops/1.json 15 def show 16 end 17 18 # GET /shops/new 19 def new 20 @shop = Shop.new 21 end 22 23 # GET /shops/1/edit 24 def edit 25 end 26 27 # POST /shops 28 # POST /shops.json 29 def create 30 @shop = Shop.new(shop_params) 31 32 respond_to do |format| 33 if @shop.save 34 format.html { redirect_to @shop, notice: 'Shop was successfully created.' } 35 format.json { render :show, status: :created, location: @shop } 36 else 37 format.html { render :new } 38 format.json { render json: @shop.errors, status: :unprocessable_entity } 39 end 40 end 41 end 42 43 # PATCH/PUT /shops/1 44 # PATCH/PUT /shops/1.json 45 def update 46 respond_to do |format| 47 if @shop.update(shop_params) 48 format.html { redirect_to @shop, notice: 'Shop was successfully updated.' } 49 format.json { render :show, status: :ok, location: @shop } 50 else 51 format.html { render :edit } 52 format.json { render json: @shop.errors, status: :unprocessable_entity } 53 end 54 end 55 end 56 57 # DELETE /shops/1 58 # DELETE /shops/1.json 59 def destroy 60 @shop.destroy 61 respond_to do |format| 62 format.html { redirect_to shops_url, notice: 'Shop was successfully destroyed.' } 63 format.json { head :no_content } 64 end 65 end 66 67 private 68 # Use callbacks to share common setup or constraints between actions. 69 def set_shop 70 @shop = Shop.find(params[:id]) 71 end 72 73 # Never trust parameters from the scary internet, only allow the white list through. 74 def shop_params 75 params.require(:shop).permit(:name, :zipcode, :address, :tel) 76 end 77end

shops.coffee

ruby

1$ -> 2 $("#shops .page").infinitescroll 3 loading: { 4 img: "http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_48.gif" 5 msgText: "ロード中..." 6 } 7 dataType: 'js', 8 animate: true, 9 maxPage: 20, 10 navSelector: "nav.pagination" # selector for the paged navigation (it will be hidden) 11 nextSelector: "nav.pagination a[rel=next]" # selector for the NEXT link (to page 2) 12 itemSelector: "#shops tr.shop" # selector for all items you'll retrieve

###補足情報
Gemfileには

gem 'jquery-rails' gem 'turbolinks' gem 'jquery-turbolinks' gem 'kaminari'

上記を追記してインストールしています。

よろしくお願いします。

#追加情報
railsのバージョン:rails4.2.3

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require twitter/bootstrap //= require turbolinks //= require_tree . //= require bootstrap-tagsinput

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

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

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

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

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

moke

2017/06/02 10:30

rails のヴァージョンとapplication.jsの内容を表示してください。
riamk

2017/06/02 12:33

情報を追記しました。よろしくお願いします。
guest

回答1

0

ベストアンサー

https://teratail.com/questions/77892
こちらに追記しましたのでよろしかったらご確認下さい1

投稿2017/06/15 06:08

MasakazuFukami

総合スコア1869

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問