Question

尝试实现一个类似的按钮，在通过ajax创建记录后将禁用.Below是我的代码实现。如何让用户只能单击一次并重新加载页面并禁用按钮？。当前实现仅在手动重新加载页面时才有效。

我的实施理念：在视图中通过此行加载类似的关联关系user_id数组

<% if listing.like.collect(&:user_id).include?(current_user.id)%>

并验证是否包含current_user以显示禁用的按钮。

模特

class Listing < ActiveRecord::Base
   has_many   :like, foreign_key: :listing_id, dependent: :destroy
end 

class Like < ActiveRecord::Base  
  belongs_to  :listing
  belongs_to  :user
end

喜欢Controller

class LikesController < ApplicationController  
before_filter :authenticate_user!

  def create 
     @like = Like.new(like_params)
     respond_to do|format|
     if@like.save
         current_user.create_activity(@like, "like")
       format.js
     else
        format.html (redirect_to root_url , notice:"Unable to proceed")
        format.js
     end
    end
  end

 [...]

end

浏览

 <%=form_for(Like.new,:remote => true) do |f| %> 
       <%= f.hidden_field :listing_id, value: listing.id %>
       <%= f.hidden_field :user_id, value: current_user.id %>
       <% if (listing.like.collect(&:user_id).include?(current_user.id)) == true %>
             <%= f.button " " , class: 'round-button btn-center', data:{disabled: true} do %>
                <span class="glyphicon glyphicon-heart"></span>    
             <%end%>   
          <%else%>
              <%= f.button " " , class: 'round-button btn-center', data:{disable_with: "<i class='fa fa-spinner fa-spin'></i>"} do %>
                <span class="glyphicon glyphicon-heart"></span>    
             <%end%>
        <%end%>
      <%end%>

=＆GT; _listing.html.erb

<div class="item">
  <%= link_to (image_tag listing.image.url(:medium)), listing_path(listing) %>               
    <div class="info">
      <span class="item_title"><%= listing.name %></span>
        <%if listing.display_usd == true %>
          <span class="item_price"><%=number_to_currency(listing.price, unit:"$", precision: 2)%></span> 
        <% else %>
          <span class="item_price"><%=number_to_currency(listing.price, unit:"HTG", precision: 2)%></span> 
        <%end%>
      <span class="avatar_info">
         <%=link_to seller_path(listing.user.id) do %>
         <%=image_tag listing.user.avatar.url(:athumb), size: "20x20", 
             alt: "avatar",class: "img-circle has-tooltip ",
             title: listing.user.username , 'data-toggle' => 'tooltip', 'data-placement' => 'top'  %>
         <%end%>
      </span>

    </div>

    <% if listing.created_at >= (Date.today)%>
      <span class="label label-green">New</span>
    <%end%>

  <div class="block-actions clearfix">
    <%= render partial: "likes/form", listing: @listing %>
  </div>
</div>

Answer 1

您可以创建新文件create.js.erb，在此文件中您可以重新呈现表单，内容将会更新，例如：

$('#your-form-wrapper').html("<%= j render('likes/form') %>");

提示：has_many :like应为has_many :likes，关联应为复数名词。

  listing.like.collect(&:user_id).include?(current_user.id) # yours
  listing.like.exists?(user_id: current_user.id) # better performance

Answer 2

如果您的记录创建在您当前的代码和功能上成功运行，那么确定创建记录的当前代码，现在只需要更新此代码以显示禁用按钮而无需重新加载整个页面。

我不知道你的视图文件名是什么，在视图文件中你可以声明id之类的

#=> index.html.erb
<div id="like-form">
   <%= render partial: "likes/form", listing: @listing %>
</div>

现在创建一个partial并将表单放在部分

中

#=> _like_form.html.erb
<%=form_for(Like.new,:remote => true) do |f| %> 
    <%= f.hidden_field :listing_id, value: listing.id %>
    <%= f.hidden_field :user_id, value: current_user.id %>
    <% if (listing.like.collect(&:user_id).include?(current_user.id)) == true %>
         <%= f.button " " , class: 'round-button btn-center', data:{disabled: true} do %>
            <span class="glyphicon glyphicon-heart"></span>    
         <%end%>   
    <%else%>
        <%= f.button " " , class: 'round-button btn-center', data:{disable_with: "<i class='fa fa-spinner fa-spin'></i>"} do %>
            <span class="glyphicon glyphicon-heart"></span>    
        <% end %>
    <% end %>
<% end %>

现在创建一个JS文件，该文件以您的视图文件命名，如果我保留视图文件为index.html.erb，则JS文件为index.js.erb

#=> index.js.erb
$("#like-form").html("<%= escape_javascript(render("likes/form", , listing: @listing)) %>");

现在更新您的控制器create操作

def create 
    @like = Like.new(like_params)
    respond_to do|format|
        if @like.save
            current_user.create_activity(@like, "like")
            format.html { redirect_to request.referer }
            format.xml  { render :xml => @like, :status => :created, :location => @like }
        else
            format.html (redirect_to request.referer , notice:"Unable to proceed")
        end
    end
end

希望有所帮助

通过ajax创建记录后重新加载ActiveRecordCollectionProxy

2 个答案: