How to add a new data to the index page with pagination without refreshing the page?

Question

Post controller index is

<% if params[:topic_id].present? %>
<div class="new_post">
<%provide(:page_title,@topic.topic) %>
<h2><%= @topic.topic %></h2>
<%= link_to "Add Post",new_topic_post_path,remote: true,id: "post"%> . 
<br>
<% else %>
<h1>Posts</h1>
 <%provide(:page_title,"ALL") %>
<% end %>
<div class="row" id="posts">
<%= render @posts %>
</div>
<%= will_paginate @posts ,renderer: BootstrapPagination::Rails %>
</div>

My @post partial is

<div class="col-sm-6 col-lg-4" id="<%=post.id%>">
<div class="card">
<div class="card-topper">
  <%=image_tag post.image.url(:medium) %>
</div>
<div class="card-block">
 h4 class="card-title"><%= link_to post.title, topic_post_path(topic_id: post.topic_id,id: post.id),remote: true %><%= "(#{post.topic.topic})" %><br></h4>
  <p class="card-text" id="unused"><%= truncate(post.description,length:30) %></p>
  <%= "Avg.rate:#{post.ratings.average(:rate).to_f.round(2)}"%><br>
  <%= "#{post.comments_count} comments" %><br>

  <% if ReadStatus.where(user_id: current_user.id,post_id: post.id).blank? %>
    <%= link_to 'Read',topic_post_path(topic_id: post.topic_id,id: post.id),class: 'btn btn-read read' %>
  <% else %>
    <%= link_to 'Continue Reading',topic_post_path(topic_id: post.topic,id: post), class: 'btn btn-read read'%>
    <% end %>
</div>

Create Action in Post Controller is as follows

class PostsController < ApplicationController
protect_from_forgery
before_action :authenticate_user!
before_action :set_topic
before_action :set_post, only: [:show, :edit, :destroy, :update]
respond_to :html,:js
def create
@post = @topic.posts.new(post_params)
@post.user=current_user
if @post.save
  flash[:notice] = "Post sent Successfully"
  respond_to do |format|
    format.html {redirect_to topic_post_path(id: @post.id)}
    format.js
  end
else
  render 'new'
end
end

My create.js is

$('#posts').prepend('<%= j render @post %>');
$("#<%= @post.id%>").hide().fadeIn(1000);

When i try to add a new post in my post index like this enter image description here

The new post is adding to the same page from where i create. Here i set my per/page to 2 but the new post is adding to the same page which already has two post in the page. But when i refresh it the index is loading in correct order. How can i get the pagination correct without the page refresh

Answer 1

first I would suggest you to stop firing sql queries from the views as it breaks the flow of MVC and it increases rendering time as well.

Coming to the solution to the problem that you're facing: You're using prepend which is adding 3rd post in the space of 2 and it will keep on adding it if you're going to repeat the creation of another post.

I would suggest you to fetch @posts inside create method

if @post.save
  #add line to fetch posts in the same order you're fetching on index page
  #example: 
  @posts = Post.order(created_at: :desc).paginate(:page => 1, :per_page => 2)
end

and in create.js.erb

$('#posts').empty();
<% @posts.each do |post| %> 
 $('#posts').append('<%= j render post %>');
<% end %>