Click Button on Jquery increase integer by one

Lets us assume you are on Rails 3

If you want to update an attribute in your image table called 'like', and NOT incure a page load,  you'll have to use AJAX and JavaScript,  jquery in your case.

In order to update contents on the page via AJAX,  you'll need to define a page element that can be updated via AJAX, typically in the view it would look like this:

<div id="like">
  <%= link_to "Like", "/image/like", :id=>@image.id , :remote=>true %> 
  <%= "#{@image.like} #{pluralize(@image.like,'like')}
</div>

When the image is new,  you'll have a display that looks this

Like 0 likes

You'll need to add a route for /image/like,  then write a controller action that updates the like attribute

in app/controllers/image_controller.rb

class ImageContoller < ApplicationController
  def like
    @image = Image.find(params[:id])
    @image.like += 1
    @image.save!
    respond_to do |format|
      format.html {redirect_to :action=>:edit}
      format.js
    end
  end
end

The format.html block is there in case JavaScript is disabled, in which case you'll reload the page (assuming the edit page).

Now, create a file views/images/like.js.erb

$('#like').html(<%=j link_to 'Like', '/image/like', :remote=>true;  "#{@image.like} #{pluralize(@image.like,'like')}" %>)

As you have discovered her are many ways to accomplish a like button.   What I showed was a perpetual like,  every time you clicked like, it would update the count by 1.  Probably not a realistic example,  but I didn't want to get into the logic of seeing to it that a user can only 'like' once.  I really was just illustrating the fastest (I think) way to get it working, and demonstrate some Rails features.

By putting the JavaScript in images/like.js.erb,  all you have to do to run it is do the

format.js

from within the like action.

That's pretty minimalist.

A more minimalist method would have been:

<%= link_to "Like", "/images/like", :remote=> :true %>
<div id="likecount">
  <%= "#{@image.like} #{pluralize(@image.like,'like')} %>
</div>

Then the JavaScript would be:

$('#likecount').html('<%=j "#{@image.like} #{pluralize(@image.like,'like')}" %>')

(Yes, forgot quotations in earlier post,  you may have to play around,  because I don't have 3.1 running anywhere I can't test anything,  so NOTHING is tested!)

If you put the code in assets/javascript/images.js,  then you have to do more work to wire that code into your app. You'd have to put in in a function, and bind a click to that function.  That may be the correct way to go though,  it depends on how complicated your JavaScript gets, what else you do in JavaScript on the page, etc.  At some point it may be cleaner to have all your JavaScript in one file,  but for the sake of a simple example, I put it in like.js.erb,  mostly to illustrate the format.js feature.

Last edited by BradHodges (2011-10-30 11:06:21)

are you using :remote=>:true in your link ?

o and for routes it's   match 'arts/like' => "arts#like"

I put all three tags in layout/application.html.erb but still it is reloading a page every time.

I tried that too and sadly it still not work.... sorry