Действует как Votable Prompt on Downvote Rails 4

Question

Я использую act_as_votable на моих рельсах 4 приложения.

У меня он настроен так, что upvotes/downvotes берутся через запрос ajax. Я хотел бы реализовать подсказку или подтверждение с текстовым полем внутри нее, поэтому, когда пользователь опустошает статью, отображается всплывающее окно, и они могут ввести свою причину для его downvoting.

У меня возникли проблемы с поиском какой-либо документации по этому поводу. Есть ли у кого-нибудь рекомендации?

Вот мой текущий код контроллера:

и внутри зрения:

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

и включает в себя образует, СОДЕРЖАЩИЕ a text_field/text_area, чтобы пользователь мог указать причину для 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> 

Если вам не нравится подход, вы можете также использовать FadeIn/FADEOUT или скрыть/показать для отображения формы, содержащий text_field/text_area, но вы выиграли» t получите это pop-up эффект с этими.