Topic: Click Button on Jquery increase integer by one

Basically I want to make a like function on my website. Every image will have an arrow up on the left hand corner, where if it is clicked, the liked integer in the database or that image will increase by one. I am wondering if I can do that without violation mvc. Of course I do not want it to load a new page everytime the arrow is clicked so I was thinking of using Jquery. I read somewhere that I can use render partials to do this but I was thinking is there an easier way to update an integer then that. Thanks.

Re: 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')}" %>)
Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Click Button on Jquery increase integer by one

Thank you for answering my question again. I am having a problem with the last part of your solution though.

I am currently using rails 3.1 so instead of images/like.js.erb I put it at assets/javascript/images.js. Will that be problematic?

Further I do not understand what the last line do.

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

Why do I have to copy what I put in the div once more? and shouldn't it be something to do with $('#like').click instead of html.

I also come across a syntax error when i tried to put that into my images.js file. I expect it might be that I have to put the <%=j link_to 'Like', '/image/like', :remote=>true;  "#{@image.like} #{pluralize(@image.like,'like')}" %> in quotes. Am I correct in that?

Again Thank you. Looking forward to your answer

Re: Click Button on Jquery increase integer by one

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)

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Click Button on Jquery increase integer by one

Hi Brad,

Again thank you for your reply. I feel like I am getting really close to getting it working. The problem I am having now though, after following your like.js.erb example, is that instead of going to format.js it is going to format.html. So everytime my page reloads itself which is something I avoid. I believe that maybe it cannot find the like.js.erb file? I am currently putting that in /views/images/like.js.erb. Is there something that I miss? I also ensure that javascript is turned on in my browser.

Thanks.

Regards,
Kane

Re: Click Button on Jquery increase integer by one

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

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Click Button on Jquery increase integer by one

Yes. My image folder is actually call art. So therefore I did in views/arts/show.html.erb. Also due to a mistake of mine I put in the column as likes instead of like.

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

Then in views/arts/like.js.erb i put in
$('#likecount').html('<%=j "#{@art.likes} #{pluralize(@art.likes,'like')}" %>');


and in arts_controller i put in

  def like
    @art = Art.find(params[:id])
    @art.likes += 1
    @art.save!
    respond_to do |format|
      format.html {redirect_to :action=>:show, :id => @art.id}
      format.js
    end
  end

Is there anything i did wrong?

Re: Click Button on Jquery increase integer by one

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

Re: Click Button on Jquery increase integer by one

Check your JavaScript includes,  try doing them manually, in the following order:


<%= javascript_include_tag "jquery.min" %>
<%= javascript_include_tag "rails" %>
<%= javascript_include_tag "application" %>

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Click Button on Jquery increase integer by one

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

Re: Click Button on Jquery increase integer by one

Make sure THIS is the jquery you are running,  it should of come with tour Rails 3.1,  but maybe somehow it got changed???

https://github.com/rails/jquery-ujs

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Click Button on Jquery increase integer by one

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

Re: Click Button on Jquery increase integer by one

Oh man,  I missed that little post about your route!!!!!!

match 'arts/like(.:format)' => "arts#like"

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Click Button on Jquery increase integer by one

Hi Brad,

It still doesn't work sad But it's okay, I will just reload the page and try again some other time. Thanks a lot for your help. I really apperciate it.

Kane