时间戳

首页 > 解决方案 > 如何让引导组件在使用rails的ajax之后打开？

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

问题描述

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

我正在使用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

感谢您的帮助

标签： ruby-on-railsrubyajaxtwitter-bootstrap

解决方案

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

为了得到你不想要的结果，你不应该做重定向，而是重新渲染视图的一小部分。为此，您需要redirect_to root_path从控制器中删除 。在您的 views/comments 文件夹中创建一个 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() ）

推荐阅读