在我看来,在成功 Ajax 请求投赞成行动后,如何增加赞成总数



我有一个Thing模型,通过UpVote模型有很多赞成票。我希望能够通过 Ajax 从 things/show 创建一个新的 UpVote 对象,并在不刷新页面的情况下增加赞成总数。

通过 Ajax 创建新的UpVote记录是有效的,但是我无法增加视图中的赞成票计数。

成功创建赞成票后,如何增加赞成总数?

这是我到目前为止尝试过的:


视图/事物/显示.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 %>');

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

模型/事物.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

应用.js

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

路线.rb

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

应用.js头

<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>

这就是你应该这样做的方式。

视图/事物/显示.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 %>');

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

如果您想要其他内容,请添加评论

确保application.js中有以下内容:

//= require jquery
//= require jquery_ujs

确保你使用 Jquery,我只会用

更新.js.erb

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

num 中 $ 前面的 + = +$('#up_votes'(.text((; 将字符串转换为整数以增加 ut 增量。

你也可以使用 rails API 提供的 rails increment(( 命令来执行:(在控制器中(

@new_votes_count.increment!(:up_votes)

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

没有一个答案对我有用...这就是我最终所做的:

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>

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

最新更新