How do I make the like counter to go down when I click the dislike button and vice versa?

Question

this is the controller with like action:

 def like
like = Like.create(like: params[:like], user: current_user, story: @story)

respond_to do|format|
  if like.valid?
    format.js
  else
    format.js {render status: 403, js: "alert('You can only like/dislike a story once')"}
  end
end

this is the model that has the counter from model:

   def thumbs_up_total
       self.likes.where(like: true).size
   end

   def thumbs_down_total
       self.likes.where(like: false).size
   end

this is the View. I am getting the counter from the model. 'thumbs up' and 'thumbs down':

          <div class="pull-right">
              <%= link_to like_story_path(story, like: true), method: :post, data: { remote: true } do %>
              <div class="likes"></div>
              <% end %>
              <div id = "like-<%= story.id %>">
              <%= story.thumbs_up_total %>
              </div>
              <%= link_to like_story_path(story, like: false), method: :post, data: { remote: true } do %>
              <div class="dislikes"></div>
              <% end %>
              <div id="dislike-<%= story.id %>">
              <%= story.thumbs_down_total %>
              </div>
           </div>

Answer 1

I guess you are asking for something like this, correct?

<div class="pull-right">
              <%= link_to like_story_path(story, like: true), method: :post, data: { remote: true } do %>
              <div class="likes"></div>
              <% end %>
              <div id = "like-<%= story.id %>">
              <%= story.thumbs_up_total - story.thumbs_down_total%>
              </div>
              <%= link_to like_story_path(story, like: false), method: :post, data: { remote: true } do %>
              <div class="dislikes"></div>
              <% end %>
              <div id="dislike-<%= story.id %>">
              <%= story.thumbs_down_total - story.thumbs_up_total %>
              </div>
           </div>

Answer 2

Move parts of your view to partials, createlike.js and fill it with code to render the partials.

First change your view code to this

      <div class="pull-right">
          <%= link_to like_story_path(story, like: true), method: :post, data: { remote: true } do %>
          <div class="likes"></div>
          <% end %>
          <%= render "thumbs_up" %>
          <%= link_to like_story_path(story, like: false), method: :post, data: { remote: true } do %>
          <div class="dislikes"></div>
          <% end %>
          <%= render "thumbs_down" %>>
       </div>

Then create two new partials.

# _thumbs_up.html..erb
<div id = "like-<%= story.id %>" class="thumbs-up">
     <%= story.thumbs_up_total %>
 </div>

# _thumbs_down.html..erb
<div id = "like-<%= story.id %>" class="thumbs-down">
     <%= story.thumbs_down_total %>
 </div>

Add a file called like.js

# like.js
$(".thumbs-up").html("<%= j(render("thumbs_up")) %>");
$(".thumbs-down").html("<%= j(render("thumbs_down")) %>");

like.js will then be called when your links are clicked. It will re-render your partials and update your thumb counts on click.