CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajaxruby-on-rails-3
Kellogs
Kellogs

Reputation: 471

Issue with Ajax Appending

I have a comment model that is paginated and I would like the comments to load more comments on the same page whenever the next button is clicked. I have somewhat of an idea of how to go about doing this but can anyone advise how to go about doing this. I have some code already.

For the comment section instead of render I think it may have to be looking for the micropost and its id to find the right comments to append but I am unsure about how to go about tying this all together.

Pagination JS

$(function() {
  $("#CommentPagin a").live("click", function() {
    $.getScript(this.href);
    return false;
  });
});

Show JS

$("#cc").append('<%= escape_javascript(render :partial => "users/comments" )%>');

Comment Section

<div id='comments'>
  <% comments = micropost.comments.paginate(:per_page => 5, :page => params[:page]) %>
  <div id="CommentPagin">
  <span class="CommentArrowIcon"></span>
  <%= will_paginate comments, :page_links => false , :class =>"pagination" %>
  </div>
<%= render 'users/comments' %>
</div>

Comment Rendering Section

<div id="cc">
<% comments = micropost.comments.paginate(:per_page => 5, :page => params[:page]) %>
<%= render comments %>
</div>

User Controller

  def show
    @user = User.find(params[:id])
    @school = School.find(params[:id])
    @comment = Comment.find(params[:id])
    @micropost = Micropost.new
    @comment = Comment.new
    @comment = @micropost.comments.build(params[:comment])
    @microposts = @user.microposts.order('created_at DESC').paginate(:per_page => 10, :page => params[:page])
      respond_to do |format|
      format.html
      format.js
     end
  end

Upvotes: 0

Views: 123

Answers (1)

max
max

Reputation: 101821

I´m a bit rusty with rails so this is somewhat generic answer.

I would load the next n comments from a route / action that renders just your Comment Rendering Section as HTML

Just think of it as you where requesting assets from your own API and using them to update the page.

Pagination JS

/**
* jQuery 1.7+
* use .delegate() for older versions.
**/
$("#CommentPagin").on('click', 'a', function(e){
    // Get data from server - make sure url has params for per_page and page.
    $.get($(this).attr('href'), function(data){
        // refresh client with data
        $("#cc").append(data);
    });
});

Upvotes: 1

Related Questions