CODEWITHSUNDEEP
jqueryruby-on-railsrubyajaxruby-on-rails-4
user4133294
user4133294

Reputation:

How to increment upvote total in my view after successful Ajax request to upvote action

I have a Thing model that has many upvotes via an UpVote model. I want to be able to create a new UpVote object via Ajax from things/show and increment the upvote total without refreshing the page.

Creating a new UpVote record via Ajax works, however I cannot increment the upvote count in the view.

How can I increment the upvote totals upon successful creation of an upvote?

Here is what I have tried so far:

views/things/show.html.erb

<div id= "thing">

  <div id="upvote">
    <%= @thing.up_votes.count %>
  </div>

  <div id= "vote">
    <%= link_to "upvotething", upvote_thing_path(@thing.id), :remote => true, :id => "new_upvote_link", method: :post, :class => "btn btn-small" %>
  </div> 

</div>

views/things/create.js.erb

$('#new_up_vote').remove();
$('#new_up_vote_link').show();
$('#up_votes').append('<%= j render("up_vote", :up_vote => @up_vote)%>');

views/things/upvote.js.erb

alert("here");
$('#up_votes').html('<%= @new_votes_count %>');

controllers/things_controller.rb

class ThingsController < ApplicationController

  def show
    @thing = Thing.find(params[:id])
    @thing.up_votes.build
    @up_vote = UpVote.new
  end

  def upvote
    @thing = Thing.find(params[:id])
    UpVote.create!(ip: request.remote_ip, voteable_id: params[:id], voteable_type: 'Thing')
    respond_to do |format|
      if @up_vote.save
        @new_votes_count = @thing.up_votes.count
        format.html { redirect_to @thing, notice: 'Voted up' }
        format.json { render json: @up_vote, status: :created, location: @up_vote }
        format.js
      else
        @new_votes_count = @thing.up_votes.count
        format.html { redirect_to @thing, notice: 'Voted up failed' }
        format.json { render json: @up_vote.errors, status: :unprocessable_entity }
        format.js
      end
    end
  end
end

  private

    def thing_params
      params.require(:thing).permit(:name, :avatar, :email)
    end

end

models/thing.rb

class Thing < ActiveRecord::Base
  has_many :up_votes, as: :voteable
  # ...
end

models/up_vote.rb

class UpVote < ActiveRecord::Base
  belongs_to :voteable, polymorphic: true
end

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
//= require turbolinks
//= require_tree

routes.rb

#...
post 'things/upvote/:id' => 'things#upvote', as: 'upvote_thing'
resources :things do
  resources :up_votes
end

application.js head

<head>
  <title>Application</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    "jquery-ui.min" %>
  <%= javascript_include_tag "external/jquery/jquery" %>
  <%= javascript_include_tag "jquery-ui.min" %>
</head>

Upvotes: 4

Views: 953

Answers (5)

user4133294
user4133294

Reputation:

None of the answers worked for me...This is what I ended up doing:

things/show.hmtl.erb:

<div id="<%= thing.name %>"> <%= thing.up_votes.count %> </div>
<a id="<%= thing.name.downcase %>_link"><%= link_to "upvote", upvote_thing_path(:id => thing.id), remote: true, method: :get %></a>
<script type="text/javascript">
  $("#<%= thing.name.downcase %>_link").click(function () {
    $.get( "<%= upvote_thing_path(:id => thing.id) %>", function( data ) {
      $('#<%= thing.name %>').html(data + ' %');
    });
  });
</script>

controllers/things_controller.rb

def upvote
  @thing = Thing.find(params[:id])
  UpVote.create!(ip: request.remote_ip, vanishing: false, voteable_id: params[:id], voteable_type: 'Thing')
  redirect_to @thing
  render text: @thing.up_votes.count.to_s
end

Upvotes: 1

tagCincy
tagCincy

Reputation: 1599

Add respond_to :html, :js to the top of your controller.

  def upvote
    @thing = Thing.find(params[:id])
    @up_vote = @thing.up_votes.build(ip: request.remote_ip)
    if @up_vote.save
        respond_with @new_votes_count do |format|
            format.html { redirect_to @thing, notice: 'Voted up' }
            format.js {
                @new_votes_count = @thing.up_votes.count
            }
        end
    else
        render :show 
    end
  end

Upvotes: 1

applejuiceteaching
applejuiceteaching

Reputation: 1493

Make sure you hare using Jquery, I would just increment it with the

Update.js.erb

var num = +$('#up_votes').text();
num += 1;
$('#up_votes').text(num);

The + before the $ in var num = +$('#up_votes').text(); turns the string into a integer for yout increment.

You can also use the rails increment() command provided by the rails API to do: (In your controller)

@new_votes_count.increment!(:up_votes)

Upvotes: 1

mohameddiaa27
mohameddiaa27

Reputation: 3597

Make sure you have the following in your application.js:

//= require jquery
//= require jquery_ujs

Upvotes: 2

khaled_gomaa
khaled_gomaa

Reputation: 3412

This is how you should do it.

views/things/show.html.erb

<div id= "thing">

  <div id="upvote">
    <%= @thing.up_votes.count %>
  </div>

  <div id= "vote">
    <%= link_to "upvotething", upvote_thing_path(@thing.id), :remote => true, :id => "new_upvote_link", method: :post, :class => "btn btn-small" %>
  </div> 

</div>

views/things/upvote.js.erb

$('#up_votes').html('<%= @new_votes_count %>');

controllers/things_controller.rb

class ThingsController < ApplicationController
  def upvote
    @thing = Thing.find(params[:id])
    @up_vote = UpVote.new(ip: request.remote_ip, votable: @thing)
    respond_to do |format|
      if @up_vote.save
        @new_votes_count = @thing.up_votes.count
        format.html { redirect_to @thing, notice: 'Voted up' }
        format.json { render json: @up_vote, status: :created, location: @up_vote }
        format.js
      else
        @new_votes_count = @thing.up_votes.count
        format.html { redirect_to @thing, notice: 'Voted up failed' }
        format.json { render json: @up_vote.errors, status: :unprocessable_entity }
        format.js
      end
    end
  end
end

Add a comment if you want anything else

Upvotes: 4

Related Questions