Ruby on Rails、 Infinite Scrollとkaminariを使用して無限スクロールの実装について

Question

###前提・実現したいこと
http://ruby-rails.hatenadiary.com/entry/20141115/1416021886

こちらのサイトを参考にrailsアプリケーションにInfinite Scrollとkaminariを使用して無限スクロールの実装をしました。

手順通り１から全て実装してみました。

ですが、最後挙動を確認してみると

このようにページを遷移するリンクが表示されるだけで無限スクロールにはなりませんでした。

このような場合、原因はどこにあるのでしょうか？

どこか間違っている箇所などあれば教えてください。

###該当のソースコード
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(2)
  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

index.hetml.erb

<p id="notice"><%= notice %></p>

<h1>Listing Shops</h1>

<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>

<br>

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

<%= paginate @shops %>

_shop.hetml.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.coffee

$ ->
  $("#shops .page").infinitescroll
    loading: {
      img:     "http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_48.gif"
      msgText: "ロード中..."
    }
    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

よろしくお願いします。

Answer 1

初めまして。

僕も同じようにやってみましたが同じように動きませんでした。
一つ一つ確認したところ、質問者様が参考にされたサイトでJavaScriptのinfinite scrollをダウンロードする場所のリンクが切れているようです。

間違い（リンク切れ）

curl -k -o vendor/assets/javascripts/jquery.infinitescroll.js https://raw.githubusercontent.com/paulirish/infinite-scroll/master/jquery.infinitescroll.js

修正後

curl -k -o vendor/assets/javascripts/jquery.infinitescroll.js https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js

ちなみにcurlコマンドの意味は以下のとおりです。

curl -k -o [ここにファイルを保存するよ] [ここからダウンロードしたものを]

今回は[ここからダウンロードしたものを]の部分がリンク切れになっていたので、infinite scrollの呼び出しに失敗していたというわけです！

ちみに、もう一回そのコマンド叩いちゃってると思いますが、もう一回やっても問題ないのでやってみてください。

確認手順としては
①あれ？これ動いてないな。jquery本当に読み込まれてるかな？
macの場合 command + I でchromeのconsoleを開く

consoleタブが真っ赤でエラーが出てる！
真っ赤な部分のエラー内容は

Uncaught SyntaxError: Unexpected token :      jquery.infinitescroll.self-395408a….js?body…:1 

ふむふむ、jquery.infinitescrollでエラーが出てるな、ファイル名クリックしてみてみよう。

ん？404 NOT FOUNDだ。
なにこれファイルの中身ないじゃん。

curlでダウンロードした先のファイルあるのかな？ダウンロード先をブラウザ見てみよう。

あれ、ないじゃん。
あーこれ古い記事だからその頃はあったけど、今はもう消されてるんだなぁ。
じゃあ違うところからファイル持ってきてcurlコマンド使っちゃおう！

で、ファイルが有るかどうかを調べて見ました。
完成後のファイルをcloud9に上げているのでよかったらご覧になってください！
完成後ファイル
（もしかしたら会員登録が必要かもしれないです_(:3 」∠ )_）

また、infinite scrollの初期仕様上、スクロールして最下部まで行かないと次のロードが始まりません。
つまり、Windowの縦幅が広く、最初の状態よりも長い幅になっているとinfinite scrollが発生しないかもしれないです。
Windowサイズを縦に小さくして確認してみてください。

お役に立てば幸いです！

Comments

[riamk]

ご回答ありがとうございます。
原因の発見の仕方から、解決策、サンプルファイルの提供までして頂きありがとうございます。

早速試してみたいと思います！
ありがとうございました！

Answer 2

$("#shops").append()

# ↑こちらでidを指定しているので、まずは以下のように修正してください
# 現在はクラスで発火するようになっているので、これも動かない原因のうちに入るっぽいですね

<tr id="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>

Comments

[riamk]

ご回答ありがとうございます！

早速ご指摘頂いたように
_shop.html.erbファイルの <tr class="shop"> の部分を <tr id="shop"> と修正してみました。

ですが、表示関は変わりはありませんでした。
他に修正してみたほうがいい箇所や問題がありそうな部分があればご指摘頂けると嬉しいです。

[hiyashikyuri]

記事を見てみたら面白そうだったんで僕もちょこっとやってみたんですけど、先ほどの修正は全く関係ありませんでした、すみません；；
コピペして試してみた結果なんですけど、index.js.erbが読み込まれていないので、$("#shops")に対してスクロールしたら<tbody>をその都度追加する、つまり無限スクロールの元となる要素が""追加されない""状況になっています
普段railsはAPIモードでしか使用していないので、どうやってjs.erbを読み込ませればいいのかちょっと分かりかねるので、明日時間があれば調べてわかったらまた回答させていただきますね！

[riamk]

なるほど。そうだったんですね。
原因追求していただきありがとうございます。
私もjs.erbを読み込ませるように試みてみます。
もしできたら、こちらで情報共有いたします！