Question

我正在使用act作为可投票的宝石，并在评论中实施了投票系统。现在，当用户点击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>

my _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或内置导轨unobtrusive ajax的更简单实施可以轻松简化您对$.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

<强>股利

您可以通过在.js.erb文件或ajax success功能

中部署代码来更新已呈现的DIV

使用xmlhttprequest使用ajax onclick rails更新div

1 个答案: