【发布时间】：2021-07-15 01:19:58
【问题描述】：
我正在尝试从 Turbolinks 升级到 Turbo，但我发现客户端没有为表单提交呈现重定向。
版本：
- 导轨 6.1.4
- hotwire-rails 0.1.2
- @hotwired/turbo-rails 7.0.0-beta.8
我暂时忽略了 Turbo 和 Devise 之间的不兼容问题 - 只是试图让常规表单正常工作而不必禁用它们上的 Turbo。
这是一个示例操作：
def update
authorize @label
@label.update(label_params)
if @label.save
redirect_to document_labels_path(document_id: @document.id)
else
render :new, status: :unprocessable_entity
end
end
这是一个渲染的表单：
<form class="simple_form new_label" id="label_form" novalidate="novalidate" action="/documents/72/labels" accept-charset="UTF-8" method="post">
...
</form>
当提交一个有效的表单时，服务器会说Processing by LabelsController#create as TURBO_STREAM 并正确地提供一个 302。然后它将为重定向位置提供 200。然而，浏览器只查看提交的表单。将重定向状态更改为 303 不会改变任何内容。
我为每个 Turbo 事件添加了一个 console.log：
document.addEventListener("turbo:load", function () {
console.log('TURBO:LOAD')
})
document.addEventListener("turbo:click", function () {
console.log('TURBO:CLICK')
})
document.addEventListener("turbo:before-visit", function () {
console.log('TURBO:BEFORE-VISIT')
})
document.addEventListener("turbo:visit", function () {
console.log('TURBO:VISIT')
})
document.addEventListener("turbo:submit-start", function () {
console.log('TURBO:SUBMIT-START')
})
document.addEventListener("turbo:before-fetch-request", function () {
console.log('TURBO:BEFORE-FETCH-REQUEST')
})
document.addEventListener("turbo:before-fetch-response", function () {
console.log('TURBO:BEFORE-FETCH-RESPONSE')
})
document.addEventListener("turbo:submit-end", function (event) {
console.log('TURBO:SUBMIT-END')
// event.detail
})
document.addEventListener("turbo:before-cache", function () {
console.log('TURBO:BEFORE-CACHE')
})
document.addEventListener("turbo:before-stream-render", function () {
console.log('TURBO:BEFORE-STREAM-RENDER')
})
document.addEventListener("turbo:render", function () {
console.log('TURBO:RENDER')
})
这是成功提交表单的输出：
TURBO:BEFORE-FETCH-REQUEST
TURBO:SUBMIT-START
TURBO:BEFORE-FETCH-RESPONSE
TURBO:SUBMIT-END
没有渲染事件。调查event.detail.fetchResponse.response 的turbo:submit-end 似乎完全知道客户端应该重定向，它只是没有。
Response {type: "basic", url: "http://lvh.me:3000/documents/72/labels", redirected: true, status: 200, ok: true, …}
body: (...)
bodyUsed: true
headers: Headers {}
ok: true
redirected: true
status: 200
statusText: "OK"
type: "basic"
url: "http://lvh.me:3000/documents/72/labels"
__proto__: Response
【问题讨论】：
-
我还尝试使用
data-turbo="true"启用 Turbo 处理，这会禁用 rails-ujs 表单提交处理，但同样，请求成功后不会发生重定向。 -
我认为您处于中间状态，这就是它不起作用的原因。你只是想让表单提交像以前一样工作吗？或者您是否尝试使用 turbo 处理表单提交？您的控制器不区分
format.html和format.turbo_stream请求，如果两者都是选项，则需要这样做。如果您只是希望它像之前的 Turbo 一样工作，请禁用提交按钮上的 turbo。有几个关于集成 Hotwire 后链接被“破坏”的问题。 stackoverflow.com/questions/68641396/… -
我正在尝试将行为恢复到 Turbo 之前的状态，而无需禁用 Turbo。如果我必须在任何地方禁用它才能使其正常工作，我宁愿不实施它。所以所有的表单提交都需要在他们的操作中使用
format.turbo_stream格式处理？那不是我读的。如果是重定向，它应该重定向。 Turbo 似乎确实意识到它应该这样做。 -
FWIW 我有一个非常接近默认设计会话/新页面的登录页面。我不需要在我的表单上禁用 Turbo，因为表单不在 turbo_frame 标记内。 Turbo 大多只是选择加入。如果您收到 TURBO-STREAM 请求类型，则您的表单可能位于 turbo_frame 内。如果不是，我不确定为什么请求类型被设置为 turbo。
-
这是一个很好的提示 - 我从一个不在 Turbo 框架内的表单收到一个 Turbo 请求。我放弃了在 Turbo 处于测试阶段时尝试实施它，但当我有修复时我会回到这个问题。
标签： ruby-on-rails turbolinks hotwire-rails