【问题标题】:Rails 6: form with remote: true and Turbolinks not showing flash after redirectRails 6:远程表单:true和Turbolinks在重定向后不显示flash
【发布时间】:2019-09-14 11:39:36
【问题描述】:

我有启用 Turbolinks 的 <%= simple_form_for @offer, remote: true %>。我正在尝试在我的update 操作中重定向并显示成功闪光:

respond_to do |format|
  if @offer.update(offer_params)
    flash[:success] = "#{@offer.name} #{t(:updated)}"
    format.html { redirect_to seller_offers_path }
    format.js
  else
    format.html { render :edit }
  end
end

我的update.js.erb 的代码与重定向或闪存无关:

$(".ibox-content.actions").removeClass('sk-loading');
$('.sk-spinner').css("display", "none");

在 application.html.erb 中我可以用这个来渲染 flash:

<div class="row">
  <% flash.each do |message_type, message| %>
     <%= content_tag(:div, content_tag(:strong, message), id: "flash_message",
                   class: "text-bold alert alert-#{message_type}") %>
  <% end %>
</div>

目前我的表单已保存,但没有重定向。

当我在update.js.erb 表单中添加Turbolinks.visit(&lt;%= seller_offers_path %&gt;) 保存时,重定向完成,但是没有flash。

请问有什么方法可以让我使用 Turbolinks 和 remote: true 在重定向页面上显示 Flash 吗? 到目前为止,我已经尝试过 this suggestion,但它仅适用于在同一页面上显示 Flash页面 - 它不适用于 redirect_to

更新

这确实重定向,但没有闪光:

respond_to do |format|
  if @offer.update(offer_params)
    format.js { redirect_to seller_offers_path, success: "#{@offer.name} #{t(:updated)}" }
  else
    format.html { render :edit }
  end
end

更新 2

目前我正在尝试实现类似的东西 Turbolinks.visit(url, { keep: 'flash' });mentioned in docs 一样,但似乎不适用于 Turbolinks 5.2

更新 3

我已经删除 update.js.erb 并且在我的控制器中我有

def update
  if @offer.update(offer_params)
    flash[:success] = "#{@offer.name} #{t(:updated)}"
    redirect_to seller_offers_path
  else
    render :edit
  end
end

重定向已按预期完成,但index 上仍没有显示 Flash。我可以在update 操作结束时打印我的闪存:

#&lt;ActionDispatch::Flash::FlashHash:0x00007f180d2a1c60 @discard=#&lt;Set: {}&gt;, @flashes={"success"=&gt;"My offer updated!"}, @now=nil&gt;

但是在index 操作结束时(我重定向到的地方)它是空的:

#&lt;ActionDispatch::Flash::FlashHash:0x00007f180eb3b780 @discard=#&lt;Set: {}&gt;, @flashes={}, @now=nil&gt;

看起来我的 flash 没有留给下一个请求。是因为 Turbolinks,还是其他什么原因?任何提示我都会很高兴。

【问题讨论】:

  • 如果要重定向,为什么需要用remote: true 提交表单?
  • @Tashows 我不希望我的页面完全刷新 - 例如,Turbolinks 可以用 index 操作中的内容替换我的视图。
  • 嘿@matiss,也许这会对你有帮助stackoverflow.com/questions/23967390/…
  • @Violeta 谢谢,我已经为没有重定向的 AJAX 提供了解决方案,但是我正在寻找 Turbolinks.visit 的解决方案 - 请参阅上面的更新 2。

标签: ruby-on-rails simple-form turbolinks ujs ruby-on-rails-6


【解决方案1】:

远程表单提交后重定向

当你使用通过 JS 提交的表单(例如remote: true 或默认的form_with)时,Rails 将查找并呈现常规的js 响应(在本例中为offers/update.js.erb)并忽略任何其他响应,例如html 重定向。

您原来的update.js.erb 没有包含任何代码来执行对重定向位置的访问,因此它只删除了类名并隐藏了微调器。

如您所见,js 响应需要将 Turbolinks visit 指向重定向位置。在提交表单后清除 Turbolinks 缓存也是一个好主意,因此您的 update.js.erb 可能看起来像:

$(".ibox-content.actions").removeClass('sk-loading');
$('.sk-spinner').css("display", "none");
Turbolinks.clearCache();
Turbolinks.visit(<%= seller_offers_path %>);

如果您安装了 turbolinks-rails gem,并且不需要像上面的前两行那样运行任何自定义 JS,那么您可以在控制器中简单地执行以下操作:

def update
  if @offer.update(offer_params)
    flash[:success] = "#{@offer.name} #{t(:updated)}"
    redirect_to seller_offers_path
  else
    render :edit # see note below*
  end

你不需要update.js.erb; turbolinks-rails 将自动清除缓存并访问重定向路径。这很好,因为它使您的控制器代码保持整洁(不需要respond_to),并且适用于 HTML 和 JS 请求。

* 值得注意的是,来自 JS 请求的错误响应仍然需要手动处理。为此,您可能会发现此评论很有用:https://github.com/turbolinks/turbolinks/issues/85#issuecomment-338784510

缺少闪光灯

我认为您的 flash 没有显示在更新的代码中的原因是因为您使用的是在 redirect_to, which only supportsnoticeandalert` 中设置 flash 消息的速记样式:

redirect_to seller_offers_path, notice: '…' # sets flash[:notice]
redirect_to seller_offers_path, alert: '…' # sets flash[:slert]
redirect_to seller_offers_path, success: '…' # doesn't work

如果您想使用自己的闪存密钥,您需要明确设置闪存:

flash[:success] = "#{@offer.name} #{t(:updated)}"

我还应该补充一点,Turbolinks 5 不支持 Turbolinks keep 选项。我认为这是 Turbolinks 2 或 3 中的一个功能。Turbolinks README 是最新文档的位置。

希望对你有帮助:)

【讨论】:

  • 谢谢,但我的redirected_to 页面上仍然没有闪烁。你能看看我上面的更新3吗?
  • 我发现了我的问题 - 与其他一些 JS 以及我在 lib 中的一个模块存在冲突。我删除了不必要的文件,现在我的闪存可以正常工作了。
  • 你能解释一下你的冲突吗?我也有同样的问题。
猜你喜欢
  • 1970-01-01
  • 2014-04-12
  • 1970-01-01
  • 2022-08-12
  • 1970-01-01
  • 2015-08-12
  • 1970-01-01
  • 1970-01-01
  • 2022-12-04
相关资源
最近更新 更多