Ajax喜欢/不像button4 90%工作的按钮

时间:2014-10-21 18:49:32

标签: jquery ruby-on-rails ruby ajax ruby-on-rails-4

所以我有一些可以喜欢/不喜欢的模特。我现在有一个按钮,一切都很完美,除了那个页面以前每次都要重新加载。

我现在把它作为一个ajax按钮,它可以很好地发布数据。但问题是它似乎有点被黑了。

如果页面加载时不喜欢帖子,则点击“喜欢”,心脏变红,标签显示为喜欢。如果再次单击该按钮,则不会发布帖子,但按钮标签和颜色不会更改。问题是,如果你一直点击按钮,它将继续POST不同的数据,即使它已经不受欢迎。如果在页面加载时喜欢帖子,则情况正好相反。它不断发布类似的数据。我有一个活动源,所以它会将相同的活动发布到一堆垃圾中。

这是我的代码;

状态控制器

def upvote
  @status = Status.find(params[:id])
  current_user.create_activity(@status, 'liked')
  @status.liked_by current_user
  respond_to do |format|
    format.html {redirect_to statuses_path }
    format.json { render json: @status }
   end
end

def downvote
  @status = Status.find(params[:id])
  @activity = Activity.find_by(targetable_id: @status)
  @activity.destroy!
  @status.downvote_from current_user
  respond_to do |format|
    format.html {redirect_to statuses_path }
    format.json { render json: @status}
  end
end

Application JS

$("#view-heart").click(function() {
  var id = this.getElementsByTagName('sub')[0].innerHTML

  if ($( "#test" ).hasClass( "red" )) {
    $(this).replaceWith('<span id="view-heart"><a href="' + 
    window.location.href + "/" + id + "/like" + '" action="upvote" data-
    method="put" class="item like-dislike" data-type="json" data-
    remote="true"><i class="fi-heart" id="test"></i><label>Like</label>
    </a></span>');
    $( "#test" ).removeClass( 'red' );
  } else {
    $(this).replaceWith('<span id="view-heart"><a href="' + 
    window.location.href + "/" + id + "/dislike" + '" action="downvote" 
    data-method="put" class="item like-dislike" data-type="json" data-
    remote="true"><i class="fi-heart red" id="test"></i>
    <label>Liked</label></a></span>');
  }
});

状态索引

<% if current_user.voted_up_on? status %>
  <span id="view-heart">
    <a href=" <%= "/statuses/"+ status.id.to_s + "/dislike" %>"    
    action="downvote" data-method="put" class="item like-dislike" data-
    type="json" data-remote="true">
      <i class="fi-heart red" id="test"></i>
      <label>Liked</label>
      <sub><%= status.id %></sub>
    </a>
  </span>
  <% else %>
   <span id="view-heart">
     <a href=" <%= "/statuses/"+ status.id.to_s + "/like" %>"    
     action="upvote" data-method="put" class="item like-dislike" data-
     type="json" data-remote="true">
       <i class="fi-heart" id="test"></i>
       <label>Like</label>
       <sub><%= status.id %></sub>
     </a>
   </span>
<% end %>

Github项目供参考(如果需要)https://github.com/JaredCowan/GA-Cohort-Network

非常感谢任何有助于清理和修复它的帮助!

3 个答案:

答案 0 :(得分:1)

问题是这段代码:

$("#view-heart").click(function() {...

仅将绑定 当前 #view-heart元素。

第一次单击它时,它会用新元素替换该元素,并且不会在新元素上重新建立单击绑定,因此后续单击不会调用JavaScript单击处理程序。

有一些可能的解决方案:

  1. JavaScript代码可以操纵现有元素的属性,而不是替换整个元素。这可能是最简单的解决方案。

  2. 您可以使用jQuery&#39; s event delegation绑定到父元素,并与选择器匹配,而不是将click事件直接绑定到元素。这具有创造一个&#34; live&#34;将响应页面上的更改的事件处理程序。

    例如:

    $(document).on("click", "#view-heart", function() {...
    

    除了响应DOM中的更改之外,如果页面上有许多匹配元素,这有时会带来性能优势。

  3. 您也可以同时使用这两种解决方案。

答案 1 :(得分:0)

您遇到的主要问题是,在呈现.erb文件时,if语句只显示其中一个代码块。因此,如果帖子已经被喜欢,那么'if'语句的前半部分就会执行。此.erb不会在每次单击时重新加载,因此在页面上加载的表单将重复提交。你的javascript只是改变了'#test'的颜色。

考虑删除.erb文件中的“if”语句,然后渲染两个表单,然后根据模型是否“喜欢”隐藏一个表单。然后在单击时隐藏/取消隐藏每个按钮。每个按钮都会执行自己的个人提交。

答案 2 :(得分:0)

对此的简单解决方案是每次都将两个链接放在那里,但是,您希望根据是否对其进行投票来更改堆叠顺序。因此,如果帖子已经被喜欢,则不喜欢按钮将位于顶部。如果单击该按钮,则会添加一个类以将其放在类似按钮后面。

<% if current_user.voted_up_on? status %>
  <span id="view-heart">
    <a href=" <%= "/statuses/"+ status.id.to_s + "/dislike" %>"    
action="downvote" data-method="put" class="item like-dislike" data-
type="json" data-remote="true">
         <i class="fi-heart red" id="test"></i>
         <label>Liked</label>
         <sub><%= status.id %></sub>
    </a>
    <a href=" <%= "/statuses/"+ status.id.to_s + "/like" %>"    
     action="upvote" data-method="put" class="item like-dislike" data-
     type="json" data-remote="true">
        <i class="fi-heart" id="test"></i>
        <label>Like</label>
        <sub><%= status.id %></sub>
     </a>
</span>
<% else %>
   <span id="view-heart">
     <a href=" <%= "/statuses/"+ status.id.to_s + "/like" %>"    
     action="upvote" data-method="put" class="item like-dislike" data-
     type="json" data-remote="true">
        <i class="fi-heart" id="test"></i>
        <label>Like</label>
        <sub><%= status.id %></sub>
     </a>
     <a href=" <%= "/statuses/"+ status.id.to_s + "/dislike" %>"    
     action="downvote" data-method="put" class="item like-dislike" data-
     type="json" data-remote="true">
         <i class="fi-heart red" id="test"></i>
         <label>Liked</label>
         <sub><%= status.id %></sub>
    </a>
   </span>
<% end %>

这现在成为一个简单的jquery解决方案,添加和删除类,以显示基于点击的一个或哪一个