обновить div с помощью ajax onclick rails с помощью xmlhttprequest

Question

Я использую акты как проголосоваемую жемчужину и внедряю систему голосования в комментариях. Теперь я хочу, чтобы страница перестала перезагружаться, когда пользователь нажимает ссылку «вверх» или «вниз» и обновляет счетчик голосов. Я завязывания использовать эту

<script> 
function loadXMLDoc() 
{ 
    var xmlhttp; 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
    } 
    xmlhttp.open("GET","URL_HERE",true); 
    xmlhttp.send(); 
} 
</script> 

мою _comment.html.erb

<%= div_for comment do %> 
    <p> 
      <div style="float: left; text-align: center; margin-right: 20px;" class="comment"> 
       <% if user_signed_in? %> 
        <% if current_user.voted_for? comment %> 
         <%= link_to image_tag("updis.png", {:style => 'width: 30px'}), like_post_comment_path(@post, comment), method: :put, :disabled => 'disabled' %><br /> 
         <% if comment.likes.size > comment.dislikes.size %> 
          +<%= comment.likes.size-comment.dislikes.size %><br /> 
         <% elsif comment.likes.size < comment.dislikes.size %> 
          <%= comment.likes.size-comment.dislikes.size %><br /> 
         <% else %> 
          <%= comment.likes.size-comment.dislikes.size %><br /> 
         <% end %> 
         <%= link_to image_tag("downdis.png", {:style => 'width: 30px'}), dislike_post_comment_path(@post, comment), method: :put, :disabled => 'disabled' %> 
        <% else %> 
         <%= link_to image_tag("upvote.png", {:style => 'width: 30px'}), like_post_comment_path(@post, comment), method: :put %><br /> 
         <% if comment.likes.size > comment.dislikes.size %> 
          +<%= comment.likes.size-comment.dislikes.size %><br /> 
         <% elsif comment.likes.size < comment.dislikes.size %> 
          <%= comment.likes.size-comment.dislikes.size %><br /> 
         <% else %> 
          <%= comment.likes.size-comment.dislikes.size %><br /> 
         <% end %> 
         <%= link_to image_tag("downvote.png", {:style => 'width: 30px'}), dislike_post_comment_path(@post, comment), method: :put %> 
        <% end %> 
       <% else %> 
        <%= link_to image_tag("updis.png", {:style => 'width: 30px'}), like_post_comment_path(@post, comment), method: :put, :disabled => 'disabled' %><br /> 
        <% if comment.likes.size > comment.dislikes.size %> 
         +<%= comment.likes.size-comment.dislikes.size %><br /> 
        <% elsif comment.likes.size < comment.dislikes.size || comment.votes.size == 0 %> 
         <%= comment.likes.size-comment.dislikes.size %><br /> 
        <% else %> 
         <%= comment.likes.size-comment.dislikes.size %><br /> 
        <% end %> 
        <%= link_to image_tag("downdis.png", {:style => 'width: 30px'}), dislike_post_comment_path(@post, comment), method: :put, :disabled => 'disabled' %> 
       <% end %> 
      </div> 
      <div style="float: left; margin-right: 20px;"> 
       <%= image_tag avatar_url(comment.user), class: 'profile-picture' %> 
      </div> 
      <strong> 
        <%= time_ago_in_words(comment.created_at).capitalize %> আগে <%= link_to comment.user.name, comment.user %> বলেছেন, 
      </strong> 
      <p> 
       <%= comment.body %><br/><br /> 
      </p> 
    </p> 
    <hr /> 
<% end %> 

Я не могу понять, что URL следует использовать в этой строке

xmlhttp.open("GET","URL_HERE",true); 

может кто-нибудь скажите мне, как это сделать.

Answer 1

Использование xhr может быть легко упрощается за счет более простой реализации $.ajax или встроенных рельсов unobtrusive ajax:

Я объясню, как получить то, что вы хотите с помощью стандартной $.ajax (покажет, как это работает):

---

$ .ajax

#app/assets/javascripts/application.js 
$("#vote_button").on("click", function() { 

    $.ajax({ 
     url: "your/vote/url", 
     data: {data: "info"}, 
     success: function(data) { alert(data) } 
     error: function(data) { alert(data) } 
    }); 

}); 

Чтобы ответить на ваш вопрос прямо, то url вы используете должен быть направлены в контроллере метод, который вызывает действие голосов

Я не получил никакого опыта работы с этим конкретным драгоценным камнем, но я подробно, как вы могли бы создать эта функция вручную, чтобы дать вам идею:

---

Маршруты

#config/routes.rb 
resources :pictures do 
    get :vote_up 
    get :vote_down 
end 

---

Контроллер

#app/controllers/pictures_controller.rb 
def vote_up 
    @picture = Picture.find(params[:id]) 
    #create "up" vote here 

    respond_to do |format| 
     format.js #loads vote_up.js.erb 
    end 
end 

def vote_down 
    @picture = Picture.find(params[:id]) 
    #create "down" vote here 

    respond_to do |format| 
     format.js #loads vote_down.js.erb 
    end 
end 

---

Div

Вы сможете обновить вынесенное DIV путем развертывания кода в файле .js.erb, или в ajax success функции