Rails Ajax - 渲染不同的部分

Posted 2023-02-19

【中文标题】Rails Ajax - 渲染不同的部分

【英文标题】：Rails Ajax - render different partial

【发布时间】：2018-05-10 04:38:22

【问题描述】：

我想通过 Ajax 调用提交帖子并使帖子从页面上消失。我无法弄清楚如何将它们连接在一起。我有一个包含待批准列表的页面，点击“批准”后，我希望帖子消失（我想我需要重新呈现所有待批准的帖子）。这是我的代码：

静态/_pending_approval.html.erb

%= link_to 'Approve', approve_post_path(pending_approval), class: 'btn btn-success btn-block', id: "approve_#pending_approval.id ", remote: true %>

posts_controller.rb

def approve
    authorize @post
    respond_to do |format|
      if @post.approved!
        format.html  redirect_to root_path, notice: 'Time entry has been approved' 
        format.js 
      else
        format.html  render action: "index" 
      end
    end
  end

这是我的问题。我不知道如何在不重新加载整页的情况下使帖子消失。我想我应该重新渲染我在“static/_admin.html.erb”中定义的部分'static/_pending_approval'，它会渲染帖子列表。它看起来像这样：

'静态/_admin.html.erb'

<div class="pending-homepage row">
  <h2>Items Pending Your Approval</h2>
  <hr>
  <%= render partial: 'pending_approval', locals:  pending_approvals: @pending_approvals  %>
</div>

'静态/_pending_approval.html.erb'

<% pending_approvals.each do |pending_approval| %>
  <div class="homepage-block col-md-3">
    <h4>
      <%= pending_approval.user.full_name %>
    </h4>
    ...
    ...
    ...
<% end %>

我有'posts/approve.js.erb' 文件，看起来像这样：

$('.pending-homepage').html('<%= escape_javascript render ????? %>');

我怎样才能让它工作？

【问题讨论】：

$('.pending-homepage').hide() 不起作用？

但是 .pending-homepage 是我在其中呈现帖子列表的 div，我不想隐藏所有帖子，我想隐藏我批准的那个。

所以你可以创建一个 div 来包装 .homepage-block 并添加一个标识符，然后隐藏它。

好的，所以我有这个：<div class="pending-homepage row" id="approval_2"> 和approve.js.erb：$('#approval_<%= @pending_approval.id %>').hide()，但它会抛出一个错误ActionView::Template::Error (undefined method id' for nil:NilClass)`

【参考方案1】：

您可以向.homepage-block div 添加一个标识符，然后将其隐藏。

<% pending_approvals.each do |pending_approval| %>
  <div class="homepage-block col-md-3 pending-approval-"<%= pending_approval.id %>">
    <h4>
      <%= pending_approval.user.full_name %>
    </h4>
    ...
<% end %>

在js.erb文件中：

$(".pending-approval-"<%= @post.id %>").hide()

【讨论】：

是的，我有<% pending_approvals.each do |pending_approval| %> <div class="homepage-block col-md-3" id="approval_<%= pending_approval.id%>"> 和approve.js.erb:$('#approval_<%= @pending_approval.id %>').hide() 但它会抛出一个错误 ActionView::Template::Error (undefined method id' for nil:NilClass)@987654326 @@pending_approvals` 在 static_controller.rb 中定义，但 approve,js.erb 在 'posts/approve.js.erb' 中，所以它不知道 @pending_approval 是什么。

你能在approve中定义@pending_approval吗？或者任何可以使您在视图中的 div 和 js.erb 文件中具有相同值的东西？

是的，我刚刚意识到我需要在 PostsController 中定义的 @pending_approval 才能在approve.js.erb 中访问它。我会试一试。

当您在批准中使用@post 时，我认为这可能会给您pending_approval 的值，因为您正在使用响应批准方法的js 文件，您可以查看它是否可行返回一个包含 pending_approval id 的实例变量。

是的，我知道了！ $('#approval_<%= @post.id %>').hide() 非常感谢！！！