Ruby on rails 在Downvote Rails 4上充当Votable提示符
我在rails 4应用程序上使用的是acts_as_votable 我已经设置好了,这样就可以通过ajax请求获取向上投票/向下投票。我想实现一个提示,或者一个带有文本框的确认,这样当用户对一篇文章投否决票时,就会显示一个弹出窗口,他们可以输入他们投否决票的原因 我很难找到任何这样做的文档。有人有什么建议吗 以下是我当前的控制器代码:Ruby on rails 在Downvote Rails 4上充当Votable提示符,ruby-on-rails,ajax,ruby-on-rails-4,controller,vote,Ruby On Rails,Ajax,Ruby On Rails 4,Controller,Vote,我在rails 4应用程序上使用的是acts_as_votable 我已经设置好了,这样就可以通过ajax请求获取向上投票/向下投票。我想实现一个提示,或者一个带有文本框的确认,这样当用户对一篇文章投否决票时,就会显示一个弹出窗口,他们可以输入他们投否决票的原因 我很难找到任何这样做的文档。有人有什么建议吗 以下是我当前的控制器代码: def upvote @article = Article.find(params[:article_id]) @subarticle =
def upvote
@article = Article.find(params[:article_id])
@subarticle = @article.subarticles.find(params[:id])
session[:voting_id] = request.remote_ip
voter = Session.find_or_create_by(ip: session[:voting_id])
voter.likes @subarticle
respond_to do |format|
format.html {redirect_to :back }
format.json { render json: { count: @subarticle.get_upvotes.size } }
end
end
def downvote
@article = Article.find(params[:article_id])
@subarticle = @article.subarticles.find(params[:id])
session[:voting_id] = request.remote_ip
voter = Session.find_or_create_by(ip: session[:voting_id])
voter.dislikes @subarticle
respond_to do |format|
format.html {redirect_to :back }
format.json { render json: { count: @subarticle.get_downvotes.size } }
end
end
在视图内部:
<%= link_to like_article_subarticle_path(@article, @subarticle), class: "voteup", method: :put, remote: true, data: { type: :json } do %>
<button type="button" class="btn btn-success btn-lg" aria-label="Left Align" style="margin-right:5px">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Helpful
</button><div class="badge" style="margin-right:10px"><%= @subarticle.get_upvotes.size %></div>
<% end %>
<script>
$('.voteup')
.on('ajax:send', function () { $(this).addClass('loading'); })
.on('ajax:complete', function () { $(this).removeClass('loading'); })
.on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
.on('ajax:success', function(e, data, status, xhr) { $(this).find("div").text("+1"); });
</script>
<%= link_to dislike_article_subarticle_path(@article, @subarticle), class: "votedown", method: :put, remote: true, data: { type: :json } do %>
<button type="button" class="btn btn-danger btn-lg" aria-label="Left Align" style="margin-right:5px">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Unhelpful
</button><div class="badge"><%= @subarticle.get_downvotes.size %></div>
<% end %>
<script>
$('.votedown')
.on('ajax:send', function () { $(this).addClass('loading'); })
.on('ajax:complete', function () { $(this).removeClass('loading'); })
.on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
.on('ajax:success', function(e, data, status, xhr) { $(this).find("div").text("-1"); });
</script>
有益的
$(“.voteup”)
.on('ajax:send',function(){$(this).addClass('loading');})
.on('ajax:complete',function(){$(this).removeClass('load');})
.on('ajax:error',function(){$(this).after('出现问题');})
.on('ajax:success',function(e,data,status,xhr){$(this.find(“div”).text(“+1”);});
无益
$(“.votedown”)
.on('ajax:send',function(){$(this).addClass('loading');})
.on('ajax:complete',function(){$(this).removeClass('load');})
.on('ajax:error',function(){$(this).after('出现问题');})
.on('ajax:success',function(e,data,status,xhr){$(this.find(“div”).text(“-1”);});
谢谢你的帮助。一段时间以来,我一直在想办法做到这一点 由于您希望它成为一个弹出窗口,您最好的选择是在单击
链接时触发一个模式
<%= link_to dislike_article_subarticle_path(@article, @subarticle), class: "votedown", method: :put, remote: true, data: { type: :json, toggle: "modal", target: "#my-modal" } do %>
<button type="button" class="btn btn-danger btn-lg" aria-label="Left Align" style="margin-right:5px">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span>
Unhelpful
</button>
<div class="badge"><%= @subarticle.get_downvotes.size %></div>
<% end %>
如果您不喜欢这种方法,也可以使用fadeIn/fadeOut或hide/show来显示表单,其中包含文本字段/文本区域
,但您不会得到弹出式效果
<div class="modal hide fade" id="my-modal" title="My modal">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Modal Body
#your form goes here
</div>
<div class="modal-footer">
<button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
</div>
</div>