Rails 5 提交表单/操作后停留在页面上完全相同的位置

Question

我有这个网店，在一个页面上你会看到

products;
带有 booking;
你的 order 和它的 bookings;
为 booking 移除 link；
和 booking 的更新表格。

order.bookings 和 products 都在 html 页面上列出了可能很长的列表。

整个预订只需要一个booking_controller。

booking_controller 的作用：

获取单个预订或销毁操作的（新）参数。
保存新订单。
重定向到商店。

工作正常，只需使用 ruby 和 html.erb.

唯一的问题是，这确实需要更改，显然在每次重定向后浏览器都会转到页面顶部。浏览器不集中。或者更确切地说，浏览器应该保留，但没有。

我了解到您在服务器端执行所有这些操作，因此需要重新加载页面，或者更确切地说，数据刷新。我不想要的是在客户端 (JS) 再次构建这一切。

我不能简单地说：数据刷新后重定向到页面上完全相同的位置。忽略异步请求会带来的所有困难，还是我夸大了，有点 JS 简单？

Answer 1

使用 Rails 时，使用 ajax 非常容易，但是如果您对 ajax 一点都不熟悉，一开始可能会有点望而生畏。幸运的是，有很多关于这个主题的教程。基本上，将 remote: true 选项添加到 form_for 语句中，rails 将自动理解您希望它以 JS 格式发出 'POST' 请求。意识到传入的 HTTP 请求是 JS 格式很重要，因为您随后需要在控制器中指定处理该事件。如：

   def create
     #Do whatever saving and processing you need here
     respond_to do |format|
        format.html { redirect_to some_path_here }
        format.js { } #By not adding anything in the brackets here, you're telling rails to fetch a js view file that follows standard rails convention and so it should be named 'create.js.erb'
   end

然后在控制器的视图文件夹中创建视图文件 create.js.erb。在该文件中，您需要刷新页面需要更新的任何部分，这通常涉及隐藏那里的旧 div 并在其位置附加一个部分。我通常在页面上留下一个带有 ID 的空 div（在本例中是您的 new_whatever_page.html.erb，然后我在 js.erb 文件中调用它以将部分内容附加到：

在您的创建中。js.erb 添加：

$("#the-id-of-the-div-in-your-new-view-page").html("<%= escape_javascript(render 'order_table') %> #This basically says, find the div on the current page with a matching id and then append the partial named _order_table.html.erb to it.

现在只需创建一个名为

的部分

_order_table.html.erb

在同一个 views 文件夹中，放入任何你想插入或更新的内容。

Rails 5 提交表单/操作后停留在页面上完全相同的位置

Rails 5 after submitting form / action stay on exactly the same spot on page

ruby-on-rails

ruby-on-rails-5