Question

我正在尝试创建一个使用AJAX的两个状态共享按钮。就目前而言，我的共享按钮在我的帖子控制器中有两个单独的动作。一个是共享[POST]，另一个是不共享[DESTROY]。最后，我有一个计数器，我试图在用户共享/取消共享时使用AJAX更新。我成功构建了一个类似的按钮，但是此按钮带有一个do块，因为我必须在按钮link_to主体内部嵌入真棒字体图标。我遇到的问题是，我无法弄清楚如何正确设置它并呈现正确的结果。如何使用两个不同的link_to按钮创建合适的切换按钮？

我为两个按钮状态创建了两个支持动作。 share.js.erb 和 unshare.js.erb 。我还有一种方法可以检查用户是否共享了帖子。

routes.rb

  resources :posts, on: :collection do
    member do
      post :share
      delete :unshare
    end
  end

posts_controller.rb

def share
  post = current_user.posts.new(original_post_id: @post.id)
  if post.save
    respond_to do |format|
      format.html {redirect_to :back}
      format.js {render layout: false}
    end
  end
end

def unshare
  unshare_post = current_user.posts.find(original_post_id: @post.id)
  respond_to do |format|
    if unshare_post.destroy
      format.html {redirect_to :back}
      format.js {render layout: false}
    end
  end
end

post / _post.html.erb

<li>
  <% if current_user.shared?(post) %>
    <%= link_to unshare_post_path(post), method: :destroy, remote: true, :id => "share_#{post.id}", style: 'text-decoration: none;' do %>
  <i class="fas fa-share-square fa-2x post-charm-bar-icon-color"></i>
    <% end %>
  <% else %>
    <%= link_to share_post_path(post), method: :post, remote: true, :id => "share_#{post.id}", style: 'text-decoration: none;' do %>
  <i class="far fa-share-square fa-2x post-charm-bar-icon-color"></i>
    <% end %>
  <% end %>
</li>
<li>
  <small class="text-muted" id="share_count-<%= post.id %>"><%= post.posts_count ? number_to_human(post.posts_count, :format => '%n%u', :precision => 2, :units => {:thousand => 'K', :million => 'M', :billion => 'B'}) : 0 %></small>
</li>

share.js.erb

<% if !current_user.shared?(@post) %>
$("#share_<%= @post.id %>").html("<%= link_to share_post_path(@post), method: :destroy, remote: true, style: 'text-decoration: none;' do %>\n" + "<i class=\"far fa-share-square fa-2x post-charm-bar-icon-color\"></i>\n" + "<% end %>");
$("#share_count-<%= @post.id %>").html("<%= @post.posts_count ? number_to_human(@post.posts_count, :format => '%n%u', :precision => 2, :units => {:thousand => 'K', :million => 'M', :billion => 'B'}) : 0 %>")
<% end %>

unshare.js.erb

<% if current_user.shared?(@post) %>
$("#share_<%= @post.id %>").html("<%= link_to unshare_post_path(@post), method: :destroy, remote: true, style: 'text-decoration: none;' do %>\n" + "<i class=\"fas fa-share-square fa-2x post-charm-bar-icon-color\"></i>\n" + "<% end %>");
$("#share_count-<%= @post.id %>").html("<%= @post.posts_count ? number_to_human(@post.posts_count, :format => '%n%u', :precision => 2, :units => {:thousand => 'K', :million => 'M', :billion => 'B'}) : 0 %>");
<% end %>

预期结果：当用户单击共享按钮时，帖子将显示第二种状态（取消共享）并增加计数器。

实际结果：该按钮不会切换状态，并且计数器不会在页面上递增。

Answer 1

您可以动态地重新加载部分模板。

将标签添加到your index.html.erb。

<div id="post_partial">
    <%= render partial: "posts/post" %>
</div>

将您的share.js.erb更改为以下代码。（unshare.js.erb也是一样。）

$("#post_partial").html("<%= j (render 'posts/post') %>");

如何使用两个单独的动作创建AJAX切换按钮？

1 个答案: