当前位置: 首页 > 面试题库 >

在成功执行Ajax请求进行举动之后,如何在我看来增加总额

牟慎之
2023-03-14
问题内容

我有一个Thing模型,可以通过一个UpVote模型进行很多投票。我希望能够UpVote通过Ajax从中创建一个新对象things/show并增加upvote总数而不刷新页面。

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>

控制器/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请求?就像是: 问题答案: 您基本上应该在脚本集顶部将变量设置为,在ajax 上将变量设置为,在处理程序中将变量再次设置为

  • 问题内容: 我正在开发php / javascript聊天。 用户登录时,其用户名将插入名为的MySQL表中。此插入返回将存储在称为 当用户关闭页面时,我需要删除MySQL表行。 我尝试了以下方法,但没有成功: js文件 chat.php 有什么办法吗? 问题答案: 您触发ajax异步(jQuery的默认设置-ajax)。但是浏览器不会等待任何卸载。 尝试在ajax 设置中进行设置。但是,您永远无

  • 问题内容: 我需要在ajax加载后添加一个类。首先,我给一些元素提供一个“就绪”类,该类可以启动CSS过渡。单击链接li#menu- item-318a时,它将删除ready类,该类将反转CSS转换,然后加载新的html文档。在Aja加载中,我再次想将ready类添加到Ajax调用插入的相同元素中。 下面的代码有一个回调,可以添加ready类,它可以工作。但是,当Ajax加载其集合时,Ready类

  • 问题内容: 我正在遵循HTML代码: AJAX jQuery代码如下: 我想通过更改选择控件(用于制造商选择的选择控件)的值来进行AJAX函数调用时使提交按钮禁用,并且应该禁用它,直到收到AJAX成功响应为止。当收到AJAX成功响应时,用户应该能够单击“提交”按钮。如何实现呢?提前致谢。 问题答案: 对于 禁用 为 使 像下面的功能

  • 我需要从tarantool中选择所有数据,从一个空间中选择两个值。如何像mysql一样执行对tarantool的请求? 现在我可以提出两个要求: 但我不知道如何将结果合并成一个;(

  • 问题内容: 浏览器不允许跨站点AJAX调用(这是安全限制)。有没有可能的解决方案? 编辑 我只控制来电者的网站 问题答案: 如果您控制双方,那么会有很多选择。例如JSONP,或修改远程网站的标头响应。 不幸的是 ,只有在远程网站支持的情况下,JSONP才有效。您 不能 将JSONP调用强制到尚不支持它的网站。 但是,正如您所说,您只能控制源网站。出于明显的原因,您无法绕过此限制来入侵浏览器。您确实