如何让引导组件在使用rails的ajax之后打开？

Posted 2023-02-15

【中文标题】如何让引导组件在使用rails的ajax之后打开？

【英文标题】：how to let bootstrap component open after ajax with rails?

【发布时间】：2021-04-14 22:33:22

【问题描述】：

我正在使用 Bootstrap Collapse Component，在 collaspe 内部，有一个表单可以添加或删除 Todo 的 Comment

我使用remote: true 来获取ajax。问题是当我提交添加或删除操作时，它会在重新渲染时关闭折叠，请问如何解决？

这是我的表格

<ul>
  <% todo.comments.each do |comment| %>
    <li>
      <%= comment.content %>
      <%= link_to 'delete', comment_path(comment), method: :delete, data:  confirm: "Are you sure?" , remote: true %>
    </li>
  <% end %>
</ul>

这是我的控制器

  def create
    @comment = Comment.new(comment_params)
    authorize  @comment
    @todo = Todo.find(params[:todo_id])
    @comment.todo = @todo
    @comment.save
    redirect_to root_path
  end

  def destroy
    @comment = Comment.find(params[:id])
    authorize @comment
    @comment.destroy
    redirect_to root_path
  end

感谢您的帮助

【参考方案1】：

在您的控制器中的销毁方法中，您有redirect_to root_path。因此，如果您将 remote: true 添加到您的 link_to 中，它将作为 AJAX 请求发送，但您的控制器会进行重定向。重定向将加载一个新页面，这就是它关闭折叠的原因。

要获得您不希望的结果，您不应进行重定向，而应重新渲染视图的一小部分。为此，您需要从控制器中删除 redirect_to root_path。在您的 views/cmets 文件夹中创建一个 destroy.js.erb 文件，您可以在其中重新渲染视图的一部分。一个小例子：

$("#id_of_html_element").html("<%= escape_javascript(render partial: 'name_of_the_partial_you_want_to_rerender') %>");

现在，当您单击删除链接时，它将转到控制器，删除评论，然后渲染 destroy.js.erb。 该文件将查找具有特定 id 的 html 元素并在其中呈现部分内容。所以不会有页面的硬重新加载，折叠将保持打开状态。 （除非您重新渲染折叠。在这种情况下，您需要调用 .collapse() ）