我有一个Thing模型,可以通过一个UpVote模型进行很多投票。我希望能够UpVote通过Ajax从中创建一个新对象things/show并增加upvote总数而不刷新页面。
Thing
UpVote
things/show
UpVote通过Ajax 创建新记录是可行的,但是我无法在视图中增加upvote计数。
成功创建Upvote后,如何增加Upvote的总数?
到目前为止,这是我尝试过的:
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>
视图/事物/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> <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>
没有答案对我有用…这就是我最终要做的事情:
事物/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>
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