Question

我有一个Thing模型，通过UpVote模型有很多upvotes。我希望能够通过UpVote中的Ajax创建一个新的things/show对象，并在不刷新页面的情况下增加upvote total。

通过Ajax创建新的UpVote记录有效，但我不能在视图中增加upvote计数。

成功创建一个upvote后如何增加upvote总数？

这是我到目前为止所尝试的内容：

视图/东西/ 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>

视图/东西/ create.js.erb

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

视图/东西/ upvote.js.erb

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

控制器/ 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

模型/ thing.rb

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

模型/ 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>

Answer 1

这就是你应该怎么做的。

<强>视图/东西/ 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>

<强>视图/东西/ upvote.js.erb

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

<强>控制器/ 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

如果您还需要其他任何内容，请添加评论

Answer 2

确保`application.js`：

中包含以下内容：

//= require jquery
//= require jquery_ujs

Answer 3

确保你使用Jquery，我只是用

增加它

<强> Update.js.erb

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

$ in var num = + $（＆＃39;＃up_votes＆＃39;）。text（）;将字符串转换为整数，以便增量。

您还可以使用rails API提供的rails increment（）命令来执行以下操作：（在您的控制器中）

@new_votes_count.increment!(:up_votes)

Answer 4

将respond_to :html, :js添加到控制器的顶部。

  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

Answer 5

没有一个答案对我有用......这就是我最终做的事情：

<强>东西/ 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>

<强>控制器/ 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

成功的Ajax请求成功后，如何在我的视图中增加upvote total

5 个答案:

确保`application.js`：

成功的Ajax请求成功后，如何在我的视图中增加upvote total

5 个答案:

确保application.js：

确保`application.js`：