如何使用 Javascript 或 Ruby on rails 重新加载页面答案

【问题标题】：How to make page reload with Javascript, or Ruby on rails如何使用 Javascript 或 Ruby on rails 重新加载页面
【发布时间】：2012-03-18 16:47:24
【问题描述】：

我正在尝试通过 Javascript 或 Ruby on Rails 代码对新位置进行排序后重新加载页面。

$("#serialize").click ->
c = set: JSON.stringify($("#sortable").nestedSortable("toHierarchy",
  startDepthCount: 0
))
$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")
false

我正在考虑在此处添加它

$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")
window.location.reload(false); 
false

但这似乎打乱了顺序。这是我的 Rails 代码

class SiteController < ApplicationController

def savesort
neworder = JSON.parse(params[:set])
prev_item = nil
neworder.each do |item|
  dbitem = Category.find(item['id'])
  prev_item.nil? ? dbitem.move_to_root : dbitem.move_to_right_of(prev_item)
  sort_children(item, dbitem) unless item['children'].nil?
  prev_item = dbitem   
end
Category.rebuild!
render :nothing => true
  end
end

我也在考虑将 render :nothing => true 更改为 redirect_to root_url 但这似乎也不起作用。

这是我的 Routes.rb（为了篇幅而缩短）

locksmithing::Application.routes.draw do
  get "site/home"
  match "/savesort" => 'site#savesort'
    root to: 'site#home'
end

那么，我应该在哪里添加代码来刷新页面？ Javascript 还是在站点控制器中？还是有其他解决方案？提前致谢。

【问题讨论】：

标签： jquery ruby-on-rails ruby ruby-on-rails-3 coffeescript

【解决方案1】：

首先，您的$.post 调用并没有达到您的预期。这个：

$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")

和这个是一样的：

$.post "savesort", c

我认为您的意图是在异步$.post 调用完成时执行$('#output').html()，但您需要一个回调函数。这部分你的$.post：

$("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")

将在构建$.post 调用时执行，其返回值将是一个jQuery 对象，$.post 不知道如何处理。要解决这个问题，只需将回调包装在一个回调中：

$.post "savesort", c, ->
    $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")

如果您将您的window.location.reload(false) 紧跟在您的$.post 之后，那么您将在 POST 完成之前重新加载页面，这可能不是您想要做的，这将解释您的“乱序”问题。尝试将其移动到 $.post 回调中，以便在 POST 完成后执行：

$.post "savesort", c, ->
    $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")
    window.location.reload(false)

您的原始代码完全忽略了来自SiteController#savesort 的响应，因此它是否不返回任何内容、返回某些内容或重定向都无关紧要。上述回调更改仍然忽略控制器返回的内容，但没关系，:nothing => true 这样做是明智的。

完成所有工作后，您可以通过让控制器返回要插入页面的新数据来替换重新加载，然后$.post 回调可以将新数据插入页面。那将是一种非常标准的 AJAX 方法。

【讨论】：

这是一些很好的信息，我能够按照您的解决方案进行操作，并且有效。非常感谢，我是 Javascript/Jquery/Coffeescript 的新手，所以当我将它从 javascript 转换为 coffeescript 时一定发生了这种情况。我得到了它的工作，并会尝试你提到的 AJAX 方法。

【解决方案2】：

由于您将post 发送到您的服务器，您的服务器可以发送一小部分内容，以仅重新呈现已更改的页面部分。

调整你的控制器动作，不声明任何渲染/重定向动作：

class SiteController < ApplicationController

  def savesort
    neworder = JSON.parse(params[:set])
    prev_item = nil
    neworder.each do |item|
      dbitem = Category.find(item['id'])
      prev_item.nil? ? dbitem.move_to_root : dbitem.move_to_right_of(prev_item)
      sort_children(item, dbitem) unless item['children'].nil?
      prev_item = dbitem   
    end
    Category.rebuild!
  end
end

这将寻找默认视图，称为savesort.js.erb。在该视图中，您可以做任何事情来覆盖类别列表。

此文件包含在浏览器中执行的纯 javascript，例如：

$("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")

当然，实际上你会希望它也更新屏幕的更多相关部分。

到目前为止，这是首选方式。这只会对屏幕进行部分更新，并且会感觉最能响应用户。

【讨论】：