Acts like Votable Prompt on Downvote Rails 4

I am using act_as_votable in rails 4 app.

I have it configured so that upvotes / downvotes are taken via an ajax request. I would like to implement a prompt or confirmation with a textbox inside it, so when the user empties the article, a popup is shown and they can enter their reason for downvoting it.

I am having trouble finding any documentation on this. 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 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>

      

        
        
        
      

    

Thanks for any help. Been trying to find a way to do this for a while.