如何成功的Ajax请求upvote动作后增加upvote总在我看来，

问题描述

我有一个的事模式，具有通过 UpVote 模型许多upvotes。我希望能够从的东西/节目创建通过Ajax一个新的 UpVote 对象并增加upvote总不刷新该页面。

创建一个新的 UpVote 记录通过Ajax的工作原理，但我不能增加在视图中upvote计数。

我如何递增upvote总计在成功创建一个upvote呢？

下面是我试过到目前为止：

---

的意见/事/ show.html.erb

 ＆LT; D​​IV ID =东西＆GT;

  ＆LT; D​​IV ID =upvote＆GT;
    ＆其中;％= @ thing.up_votes.count％GT;
  ＆LT; / DIV＆GT;

  ＆LT; D​​IV ID =投票＆GT;
    ＆LT;％=的link_toupvotething，upvote_thing_path（@ thing.id）：远程=＆GT;如此，：ID =＆GT; new_upvote_link，方法：帖子，：类=＆GT; BTN BTN小％＆GT;
  ＆LT; / DIV＆GT;

＆LT; / DIV＆GT;
 

---

的意见/事/ create.js.erb

  $（'＃new_up_vote）删除（）。
$（'＃new_up_vote_link）显示（）。
$（'＃up_votes）追加（'＆LT;％= j的渲染（up_vote：up_vote =＆GT; @up_vote）％＆GT;'）;
 

---

的意见/事/ upvote.js.erb

 警报（这里）;
$（'＃up_votes）HTML（'＆LT;％= @new_votes_count％＆GT;'）。
 

---

控制器/ things_controller.rb

 类ThingsController＆LT;的ApplicationController

  高清节目
    @thing = Thing.find（PARAMS [：ID]）
    @ thing.up_votes.build
    @up_vote = UpVote.new
  结束

  高清upvote
    @thing = Thing.find（PARAMS [：ID]）
    UpVote.create！（IP：request.remote_ip，voteable_id：PARAMS [：ID]，voteable_type：东西）
    respond_to代码做|格式|
      如果@ up_vote.save
        @new_votes_count = @ thing.up_votes.count
        的format.html {redirect_to时@thing，通知：投票了'}
        format.json {渲染JSON：@up_vote，状态：创建，地点：@up_vote}
        format.js
      其他
        @new_votes_count = @ thing.up_votes.count
        的format.html {redirect_to时@thing，通知：投票数最多失败'}
        format.json {渲染JSON：@ up_vote.errors，状态：unprocessable_entity}
        format.js
      结束
    结束
  结束
结束

  私人

    高清thing_params
      params.require（：事）.permit（：姓名，：头像，：电子邮件）
    结束

结束
 

---

型号/ thing.rb

 类的东西＆LT;的ActiveRecord :: Base的
  的has_many：up_votes，如：voteable
  ＃...
结束
 

---

型号/ up_vote.rb

 类UpVote＆LT;的ActiveRecord :: Base的
  belongs_to的：voteable，多形性：真实的
结束
 

---

的application.js

  // =需要的jQuery
// =需要jquery_ujs
// =需要的jQuery UI
// =需要引导
// =需要turbolinks
// = require_tree
 

---

routes.rb中

 ＃...
后'的东西/ upvote /：身份证'=＆GT; 东西＃upvote'，因为：upvote_thing
资源：不如意事
  资源：up_votes
结束
 

---

的application.js头

 ＆LT; HEAD＆GT;
  ＆LT;冠军＆GT;应用＆LT; /标题＆GT;
  ＆LT;％= stylesheet_link_tag应用程序，媒体说：所有，数据turbolinks通道=＆GT;真％＆GT;
  ＆LT;％= javascript_include_tag应用程序，数据turbolinks通道=＆GT;真％＆GT;
  ＆其中;％= csrf_meta_tags％GT;
  ＆LT;％= stylesheet_link_tag的jQuery ui.min％＆GT;
  ＆LT;％= javascript_include_tag外部/ jQuery的/ jQuery的％＆GT;
  ＆LT;％= javascript_include_tag的jQuery ui.min％＆GT;
＆LT; /头＆GT;
 

解决方案

无答案为我工作的...这是我落得这样做：

的东西/ show.hmtl.erb：

 ＆LT; D​​IV ID =＆LT;％= thing.name％＆GT;＆GT; ＆其中;％= thing.up_votes.count％GT; ＆LT; / DIV＆GT;
＆LT;一个ID =＆LT;％= thing.name.downcase％＆GT; _link＆GT;＆LT;％=的link_toupvote，upvote_thing_path（：ID =＆GT; thing.id），遥控器：真，方法：得到％GT;＆所述; / a取代;
＆LT;脚本类型=文/ JavaScript的＆GT;
  $（＃＆LT;％= thing.name.downcase％＆GT; _link）。点击（函数（）{
    $获得（＆LT;％= upvote_thing_path（：ID =＆GT; thing.id）％＆gt;中，功能（数据）{
      $（'＃＆LT;％= thing.name％＆GT;'）HTML（数据+'％'）。
    }）;
  }）;
＆LT; / SCRIPT＆GT;
 

控制器/ things_controller.rb

 高清upvote
  @thing = Thing.find（PARAMS [：ID]）
  ！UpVote.create（IP：request.remote_ip，消失：假的，voteable_id：PARAMS [：ID]，voteable_type：东西）
  redirect_to时@thing
  渲染文本：@ thing.up_votes.count.to_s
结束
 

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>

解决方案

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

这篇关于如何成功的Ajax请求upvote动作后增加upvote总在我看来，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！