ruby-on-rails - 在 Downvote Rails 4 上充当投票提示

Question

我在我的 Rails 4 应用程序上使用 acts_as_votable。

我已将其设置为通过 ajax 请求获得赞成票/反对票。我想实现一个提示，或者里面有一个文本框的确认，所以当用户对一篇文章投反对票时，会显示一个弹出窗口，他们可以输入他们投反对票的原因。

我很难找到有关这样做的任何类型的文档。有人有什么建议吗？

这是我当前的 Controller 代码:

  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

和 View 内部:

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

感谢您的帮助。一段时间以来一直在努力寻找一种方法来做到这一点。

Answer 1

正如您希望它作为一个弹出窗口，您最好的选择是触发一个模态点击 link_to

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

并包含一个表单，其中包含一个text_field/text_area，供用户添加反对票的原因。

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

如果您不喜欢这种方法，您也可以使用fadeIn/fadeOut 或hide/show 显示包含 text_field/text_area 的form，但您不会看到那个弹出窗口 影响那些。