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

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

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

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

Ruby on Rails

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

Q&A

解決済

1回答

2228閲覧

kaminari + Infinitescrollで無限スクロールしたい

nobu09

総合スコア33

Ruby on Rails 5

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

Ruby on Rails

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

0グッド

0クリップ

投稿2018/08/16 07:24

編集2018/08/16 09:22

前提・実現したいこと

このページを参考に実装したのですが、無限スクロールされません。

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

エラーメッセージ等は起きていません。

該当のソースコード

post.js.coffee

$(document).ready -> $("#posts .page").infinitescroll 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: "#posts tr.post" # selector for all items you'll retrieve

posts/indx.html.erb

<p id="notice"><%= notice %></p> <h1>Listing Posts</h1> <table id="posts"> <thead> <tr> <th>Title</th> <th>Author</th> <th>Body</th> <th colspan="3"></th> </tr> </thead> <tbody class="page"> <%= render @posts %> </tbody> </table> <br> <%= link_to 'New Post', new_post_path %> <%= paginate @posts %>

_post.html.erb

<tr class="post"> <td><%= post.title %></td> <td><%= post.author %></td> <td><%= post.body %></td> <td><%= link_to 'Show', post %></td> <td><%= link_to 'Edit', edit_post_path(post) %></td> <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td> </tr>

index.js.erb

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

posts_controller.rb

class PostsController < ApplicationController before_action :set_post, only: [:show, :edit, :update, :destroy] # GET /posts # GET /posts.json def index @posts = Post.order(:created_at).page(params[:page]) end # GET /posts/1 # GET /posts/1.json def show end # GET /posts/new def new @post = Post.new end # GET /posts/1/edit def edit end # POST /posts # POST /posts.json def create @post = Post.new(post_params) respond_to do |format| if @post.save format.html { redirect_to @post, notice: 'Post was successfully created.' } format.json { render :show, status: :created, location: @post } else format.html { render :new } format.json { render json: @post.errors, status: :unprocessable_entity } end end end # PATCH/PUT /posts/1 # PATCH/PUT /posts/1.json def update respond_to do |format| if @post.update(post_params) format.html { redirect_to @post, notice: 'Post was successfully updated.' } format.json { render :show, status: :ok, location: @post } else format.html { render :edit } format.json { render json: @post.errors, status: :unprocessable_entity } end end end # DELETE /posts/1 # DELETE /posts/1.json def destroy @post.destroy respond_to do |format| format.html { redirect_to posts_url, notice: 'Post was successfully destroyed.' } format.json { head :no_content } end end private # Use callbacks to share common setup or constraints between actions. def set_post @post = Post.find(params[:id]) end # Never trust parameters from the scary internet, only allow the white list through. def post_params params.require(:post).permit(:title, :author, :body) end end

試したこと

curlの取得先をhttps://unpkg.com/infinite-scroll@3.0.4/dist/infinite-scroll.pkgd.jsに修正して実施しました。

補足情報(FW/ツールのバージョンなど)

rails4 or 5

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

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

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

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

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

guest

回答1

0

自己解決

post.js.coffeeの内容をpost.coffeeに記載したところ、動作しました。

投稿2018/08/16 09:30

nobu09

総合スコア33

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問