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

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

ただいまの
回答率

90.51%

  • Ruby

    9400questions

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

  • Ruby on Rails 4

    2541questions

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

  • Twitter

    789questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,245

riamk

score 34

前提・実現したいこと

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

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

発生している問題・エラーメッセージ

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

今の状況は、

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

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

該当のソースコード

index.html.erb

<h1>Listing Shops</h1>

<%= link_to 'New Shop', new_shop_path %>

<table id="shops">
  <thead>
    <tr>
      <th>Name</th>
      <th>Zipcode</th>
      <th>Address</th>
      <th>Tel</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody class="page">
    <%= render @shops %>
  </tbody>
</table>

<%= paginate @shops, remote: true %>

_shop.html.erb

<tr class="shop">
  <td><%= shop.name %></td>
  <td><%= shop.zipcode %></td>
  <td><%= shop.address %></td>
  <td><%= shop.tel %></td>
  <td><%= link_to 'Show', shop %></td>
  <td><%= link_to 'Edit', edit_shop_path(shop) %></td>
  <td><%= link_to 'Destroy', shop, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

index.js.erb

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

shops_controller.rb

class ShopsController < ApplicationController
  before_action :set_shop, only: [:show, :edit, :update, :destroy]

  # GET /shops
  # GET /shops.json
  def index
    @shops = Shop.page(params[:page]).per(25)
    unless params[:page].blank?
      render @shops, layout: false
    end
  end

  # GET /shops/1
  # GET /shops/1.json
  def show
  end

  # GET /shops/new
  def new
    @shop = Shop.new
  end

  # GET /shops/1/edit
  def edit
  end

  # POST /shops
  # POST /shops.json
  def create
    @shop = Shop.new(shop_params)

    respond_to do |format|
      if @shop.save
        format.html { redirect_to @shop, notice: 'Shop was successfully created.' }
        format.json { render :show, status: :created, location: @shop }
      else
        format.html { render :new }
        format.json { render json: @shop.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /shops/1
  # PATCH/PUT /shops/1.json
  def update
    respond_to do |format|
      if @shop.update(shop_params)
        format.html { redirect_to @shop, notice: 'Shop was successfully updated.' }
        format.json { render :show, status: :ok, location: @shop }
      else
        format.html { render :edit }
        format.json { render json: @shop.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /shops/1
  # DELETE /shops/1.json
  def destroy
    @shop.destroy
    respond_to do |format|
      format.html { redirect_to shops_url, notice: 'Shop was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_shop
      @shop = Shop.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def shop_params
      params.require(:shop).permit(:name, :zipcode, :address, :tel)
    end
end

shops.coffee

$ ->
  $("#shops .page").infinitescroll
    loading: {
      img:     "http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_48.gif"
      msgText: "ロード中..."
    }
    dataType: 'js',
    animate: true,
    maxPage: 20,
    navSelector: "nav.pagination" # selector for the paged navigation (it will be hidden)
    nextSelector: "nav.pagination a[rel=next]" # selector for the NEXT link (to page 2)
    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

 

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • moke

    2017/06/02 19:30

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

    キャンセル

  • riamk

    2017/06/02 21:33

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

    キャンセル

回答 1

checkベストアンサー

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • Ruby

    9400questions

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

  • Ruby on Rails 4

    2541questions

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

  • Twitter

    789questions

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

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