Acts as Votable Prompt on Downvote Rails 4 - ruby-on-rails

Question

I am using acts_as_votable on my rails 4 app.
I have it set up so upvotes/downvotes are take via an ajax request. I would like to implement a prompt, or a confirmation with a text box inside of it, so when a user downvotes an article a popup is displayed and they can input their reason for downvoting it.
I am having trouble finding any sort of documentation on doing so. Does anyone have any recommendations?
Here is my current controller code:
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
and inside of the 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>
Thank you for any help. Been trying to find a way to do this for a while now.

Answer 1

As you want it as a pop-up, your best bet would be triggering a modal upon clicking the 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 %>
And include a form containing a text_field/text_area for the user to include a reason for downvoting.
<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>
If you don't like the approach, you can also use fadeIn/fadeOut or hide/show to display the form containing a text_field/text_area but you won't get that pop-up effect with those.