Могу ли я использовать Ajax для переключения div?

Question

У меня есть система голосования для модели Subrating, где, если пользователь голосует, нажимая на значок, тогда его IP-адрес добавляется в список, что мешает ему голосовать снова, а пустой значок голосования заменяется зеленым значок голосования, оба из которых определены в отдельных div. Я хотел бы сделать это. Я выяснил, как обновить подсчет голосов с помощью Ajax, но есть ли способ переключаться на значки div голосования при нажатии кнопки?

Вот что у меня есть: Скажем, я хочу переключить <div id="<%= subrating.name %>upz"> на <div id="voted">.

просмотров/вещи/show.html.erb:

<% if ((!@subratingip.include? request.remote_ip) && (!@subratingunip.include? request.remote_ip)) %> 
     <div id="subratings" > 
     <div id="<%= subrating.name %>"><%= number_to_percentage(subrating.rating, precision: 0) %></div> 
     <div id="<%= subrating.name %>upz"> 
      <a id="<%= subrating.name.downcase %>_link"><%= link_to image_tag("UpArrowGray.png", alt: "votedown", class: 'uparrowsub'), upvote_subrating_path(:id => subrating.id), method: :get %></a> 
     </div> 
     <script type="text/javascript"> 
      $("#<%= subrating.name.downcase %>_link").click(function() { 
      $.get("<%= upvote_subrating_path(:id => subrating.id) %>", function(data) { 
       $('#<%= subrating.name %>').html(data + ' %'); 
      }); 
      }); 
     </script> 

---

Контроллеры/subratings_controller.rb

def upvote 
    @subrating = Subrating.find(params[:id]) 
    UpVote.create!(ip: request.remote_ip, vanishing: false, voteable_id: params[:id], voteable_type: 'Subrating') 
    redirect_to @subrating.thing 
    render text: ((@subrating.up_votes.count.to_f + 2).to_f/(@subrating.up_votes.count.to_f + @subrating.down_votes.count.to_f + 3).round(1).to_f * 100).to_s 
    end 

Answer 1

На самом деле получается, что я могу просто вставить изображение в HTML:

<script type="text/javascript"> 
     $("#<%= subrating.name.downcase %>_link").click(function() { 
     $.get("<%= upvote_subrating_path(:id => subrating.id) %>", function(data) { 
      $('#<%= subrating.name %>').html(data + ' %'); 
      $('#<%= subrating.name %>'upz).html('<%= image_tag("UpArrowGreen.png" %>'); 
     }); 
     }); 
    </script> 

Answer 2

Попробуйте добавить эту строку $("#<%= subrating.name %>upz).attr("id", "voted"); к вашей мыши, который будет измените идентификатор div. Однако кажется, что вы устанавливаете изображение на основе содержимого внутри div, что означает, что вы должны удалить/скрыть div # upz и добавить/показать div #, проголосовавший.

Answer 3

Лучшим решением было бы использовать селекторы на основе классов и CSS.

<div id="subratings"> 
    <div class="subrating"> 
     <ul class="actions"> 
      <li class="upvote"><%= link_to("Upvote", upvote_subrating_path(subrating)) %></li> 
      <li class="downvote disabled"><%= link_to("Downvote", downvote_subrating_path(subrating)) %></li> 
     </ul> 
    </div> 
</div> 

я обычно настоятельно советую против смешивания ERB & JavaScript. Поместите ваш javascript в отдельные файлы активов. В противном случае вы часто оказываетесь в шлеме HTML, javascript и ruby ​​с вызовами ajax, бегущими по кругу.

// This delegates an event handler to any link in div.actions 
$('.subrating .actions').on('click', 'a', function(event){ 
    var $link = $(this); 
    var $actions = $link.parents('.actions'); 

    if (!$link.attr('disabled')) { 
     var promise = $.get($obj.attr('href')); 
     promise.done(function(){ 
      $actions.children('.upvote, .downvote').toggleClass('disabled'); 
      $actions.find('a').not($link).removeAttr('disabled'); 
      $link.attr('disabled', 'disabled'); 
     }); 
    } 

    event.preventDefault(); 

});