Ajax request in rails 4 to update value

Question

I have a vote button, which simply displays the amount of votes and by clicking on it, a vote is automatically added. Now I would like to add an Ajax request, so that the page doesn't refresh. Unfortunately I have never used Ajax before and therefor have no idea how to use it with Rails. I tried going through a few tutorials, but nothing seems to help.

view:

<%= link_to vote_path(:the_id => Amplify.all.where(question_id: question.id)[0].id, :the_user_id => @current_user.id), :remote => true do %>
    <button class="fn-col-2 fn-col-m-3 amplify">
        <%= image_tag "logo-icon-white.png" %>
        <p class="count"><%= Amplify.all.where(question_id: question.id)[0].users.count %></p>
    </button>
<% end %>

controller:

def vote

    @amplify = Amplify.find(params[:the_id])

    @current_user = User.find(params[:the_user_id])

    if @amplify.users.where(:id => @current_user.id).count != 0
        @amplify.users.delete(@amplify.users.where(:id => @current_user.id).first)
    else
        @amplify.users << @current_user
    end

    @question = Question.where(id: @amplify.question_id)[0]

    @amplify.update(:votes => @amplify.users.count)

    @question.update_attributes(:votes => @amplify.votes)

    redirect_to root_path
end

routes:

get '/vote' => "amplifies#vote", :as => "vote"

Answer 1

jQuery(document).ready(function($){
    $('.amplify').on('click', function(){
        var that = $(this);
        $.ajax({
           url: '/vote',
           data: {id: 'your id'},
           /**
            * Response from your controller
            */
           success: function(response) {
               that.siblings('.count').first().text(response);
           }
        });
    })
})

Answer 2

I like calling it like waldek does but with coffeescript.

However, in your example, you are using :remote => true which is the unobtrusive way

Basically you are then going into the controller where you will need a format.js

respond_to do |format|
  format.html # if you are using html
  format.js # this will call the .js.erb file
end

Then create a file vote.js.erb where you can then access your instance variables and write js

console.log('you are here');