Rails: Using Ajax

Question

Problem: Trying to implement "like" function on my blog

PostIndex:

<% @posts.each do |post| %>
<tr>
<td><%= post.name %></td>
<td><%= link_to post.content, post %></td>
<td><%= post.created_at.strftime("%Y/%m/%d, %I:%M%p") %></td>
<td><%= post.view %></td>
<td><%= post.like %></td>
<td><%= post.hate %></td>
<td><%= link_to 'like', like_post_path(post), :remote => true %></td>
</tr>
<% end %>

PostController:

def like
 @post = Post.find(params[:id])
 @post.like += 1
 @post.save

 respond_to do |format|
    format.js
 end
end

app/views/posts/like.js.erb

$('#post').html("<%=j @post.like %>");

Question:
I believe I'm not correctly pointing at the post I'm looking at in like.js.erb.
In the index file, Simply doing <%= @post.view %> worked. But how do you do it in like.js.erb?

Answer 1

You need some identifier for post's like count in your html when you want to update it after ajax call

PostIndex:

<% @posts.each do |post| %>
  <tr>
    <td><%= post.name %></td>
    <td><%= link_to post.content, post %></td>
    <td><%= post.created_at.strftime("%Y/%m/%d, %I:%M%p") %></td>
    <td><%= post.view %></td>
    <td id= "post<%= post.id %>_like"><%= post.like %></td>  <!-- set id (identifier) here -->
    <td><%= post.hate %></td>
    <td><%= link_to 'like', like_post_path(post), :remote => true %></td>
  </tr>
<% end %>

then in your app/views/posts/like.js.erb,

<% if @post.errors.blank? %>
  $("#post<%= @post.id %>_like").html("<%=j @post.like %>");
<% end %>

Answer 2

Complete Way of Using Ajax to Fix a Table Row:

In your show.html (or index.html) file, you probably have a table already.

<tr>
 <td>row 1</td>
 <td>row 2</td>
 <td>row 3</td>
</tr>

Let's pretend the rows represent some kind of variable. Then the table above would be like,

<tr>
 <td><%= @variableA %></td>
 <td><%= @variableB %></td>
 <td><%= @variableC %></td>
</tr>

I want to change variableA without reloading the whole page. So I use Ajax.

My method:

def fixvar
 @variableA = 2
end

You have to add one component to use Ajax.

def fixvar
 @variableA = 2
end

respond_to do |format|
 format.js
end

And wherever you want, you will have a link that will invoke the change via ajax.

<%= link_to 'change variable A', URLof_fixvar(@variableA), :remote => true %>

By using the option :remote => true, you're using an ajax component in your link_to method. You have to set URLof_fixvar in config/routes.rb accordingly. routing

Let's specify where to update in the table.

<tr>
 <td id="variable_change_<%= @variableA.id %>><%= @variableA %></td>
 <td><%= @variableB %></td>
 <td><%= @variableC %></td>
</tr>

We did as above to specify the row that we're trying to update. For example, the row is now defined as variable_change_1. (assuming variableA.id is 1)

Now, you need to go to the related views folder, and create a .js.erb file that relates to the defined method above. For example, I had "like" method defined in my PostController, so I created

app/views/posts/like.js.erb

In here, you only need one line of code:

$("#variable_change_<%= @variable.id %>").html("<%= @variableA %>");

The first part before .html is pointing at the specified row, and the part after is the value that we want to update. Done!