使用xmlhttprequest更新div與ajax onclick導軌

Question

我使用行爲作爲投票寶石，並在評論中實現了投票系統。現在，我希望頁面在用戶點擊upvote或downvote鏈接並更新投票計數器時停止重新加載。我捆綁使用此

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

我無法弄清楚什麼網址我應該在這條線

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

任何人都可以使用告訴我如何做到這一點。

Answer 1

您使用的xhr可以很容易地通過一個簡單得多的實施$.ajax或內置的軌道unobtrusive 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必須發送到觸發投票操作的控制器方法

我對這個特定的gem沒有任何經驗，但我會詳細介紹如何創建手動此功能給你一個想法：

---

路線

#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 

---

事業部

您可以通過在.js.erb文件部署代碼更新您呈現DIV，或在您的ajax success功能