rails turbo frame 明显在更新，但浏览器窗口保持不变

huangapple
go评论91阅读模式
英文:

rails turbo frame apparently updating but browser window remains unaltered

问题

以下是翻译好的部分：

  1. The following `_receipt_number` partial (HTML formatting tags removed for brevity's sake)
  2. is rendered in HTML as:
  4. Via a javascript that controls the device camera a scan is run and is processed (this is the relevant javascript code for the instance)
  6. via the controller action with:
  8. the log shows the action processing, however **without a format pre-defined for the contorller** and rendering required objects:
  10. The turbo_stream.erb response is set as:
  12. and the console advises that the HTML is received over the wire XHRPOSThttp://localhost:3000/carts/6/update_receipt_number with the following payload
  13. Yet the browser window does not update.
  15. I do not believe the controller's absence of request type is at play, as the response arrives to the browser. So why is the browser not refreshing the turbo_frame? *the same was attempted with a div in lieu of the turbo_frame, leading to identical behavior*
  17. What am I missing?
英文:

The following _receipt_number partial (HTML formatting tags removed for brevity's sake)

  1. <%= turbo_frame_tag :receipt_number do %>
  2.       <%= t('scan') %> <%= t('cart.receipt_number') %>
  3.       <h3><%= @cart.receipt_number %></h3>
  4.       <% if @cart.receipt_number %>
  5.         <%= button_to t('change'), clear_receipt_number_cart_path(id: @cart.id), class: 'button warning', method: :patch %>       
  6.       <% end %>
  7. <% end %>

is rendered in HTML as:

  1. <turbo-frame id="receipt_number">
  2.       scan receipt number
  3.       <h3></h3>
  4. </turbo-frame>

Via a javascript that controls the device camera a scan is run and is processed (this is the relevant javascript code for the instance)

  1. let formData = new FormData();
  2. let CodeParams = {
  3.   code_data: result.text,
  4.   id: <%= @cart.id %>
  5. };
  6. formData.append("code_json_data", JSON.stringify(CodeParams));
  7. fetch("update_receipt_number", {
  8.   method: "post", 
  9.   format: "turbo_stream",
  10.   body: formData,
  11.   headers: {
  12.     "X-CSRF-Token": document.querySelector("[name='csrf-token']").content,
  13.   }
  14. });
  15. codeReader.reset();

via the controller action with:

  1. @cart.update(receipt_number: result['code_data'])
  2. respond_to do |format|
  3.   format.turbo_stream 
  4. end

the log shows the action processing, however without a format pre-defined for the contorller and rendering required objects:

  1. Started POST "/carts/6/update_receipt_number" for 127.0.0.1 at 2023-02-27 08:24:38 +0100
  2. Processing by CartsController#update_receipt_number as */*
  5.   Cart Update (9.6ms)  UPDATE "carts" SET "updated_at" = $1, "receipt_number" = $2 WHERE "carts"."id" = $3
  6.  Rendering carts/update_receipt_number.turbo_stream.erb
  7.   Rendered carts/_receipt_number.html.erb (Duration: 0.8ms | Allocations: 349)
  8.   Rendered carts/update_receipt_number.turbo_stream.erb (Duration: 1.9ms | Allocations: 663)

The turbo_stream.erb response is set as:

  1. <%= turbo_stream.replace :receipt_number do %>
  2.   # replacing the partial with turbo
  3.   <%= render partial: 'carts/receipt_number', locals: {cart: @cart} %>
  4. <% end %>

and the console advises that the HTML is received over the wire XHRPOSThttp://localhost:3000/carts/6/update_receipt_number
[HTTP/1.1 200 OK 357ms] with the following payload

  1. <turbo-stream action="replace" target="receipt_number"><template>
  2.     # replacing the partial with turbo
  3.     <turbo-frame id="receipt_number">
  4.       scan receipt number
  5. <h3>20230224T12423036270004131601843bbaa16909b1b07b2c32414fdea5092de2769aabaa2f610860c827f27fb386d4</h3>
  6.         <form class="button_to" method="post" action="/carts/6/clear_receipt_number"><input type="hidden" name="_method" value="patch" autocomplete="off" /><button class="button warning" type="submit">change</button><input type="hidden" name="authenticity_token" value="DKVdhPK4UfmY_PzvA2amrvh9IejYEnyjHrJQANs0rlj6HHNAZjk3n6zxAgHRg0s27SWwgPZxMXOuLDiqSn6oQw" autocomplete="off" /></form>       
  7. </turbo-frame>
  8. </template></turbo-stream>

Yet the browser window does not update.

I do not believe the controller's absence of request type is at play, as the response arrives to the browser. So why is the browser not refreshing the turbo_frame? the same was attempted with a div in lieu of the turbo_frame, leading to identical behaviour

What am I missing?

答案1

得分: 3

自从您自己发出fetch请求后，您也必须自己处理响应。换句话说，您已经调用了一个方法，现在必须对返回的值采取一些操作。

通常情况下，turbo会处理繁琐的细节，但幸运的是，它确实提供了手动呈现流的API：

  1. fetch("update_receipt_number", {
  2.   method: "post",
  3.   // format: "turbo_stream", // <= 我认为这不是一个有效的选项
  4.   body: formData,
  5.   headers: {
  6.     "X-CSRF-Token": document.querySelector("[name='csrf-token']").content,
  7.     // 设置 Accept 标头以发出正确的 TURBO_STREAM 请求
  8.     "Accept": "text/vnd.turbo-stream.html"
  9.   }
  10. })
  11. .then(response => response.text())
  12. .then(text => Turbo.renderStreamMessage(text));

相关链接：

https://turbo.hotwired.dev/reference/streams#processing-stream-elements

https://developer.mozilla.org/en-US/docs/Web/API/Response/text

英文:

Since you're issuing fetch request yourself, you have to handle the response yourself as well. In other words, you have called a method and now you have to do something with the returned value.

Normally turbo would handle the nitty gritty details, but thankfully, it does expose an api for rendering a stream manually:

  1. fetch(&quot;update_receipt_number&quot;, {
  2.   method: &quot;post&quot;,
  3.   // format: &quot;turbo_stream&quot;, // &lt;= i don&#39;t think, this is a thing
  4.   body: formData,
  5.   headers: {
  6.     &quot;X-CSRF-Token&quot;: document.querySelector(&quot;[name=&#39;csrf-token&#39;]&quot;).content,
  7.     // set Accept header to issue a proper TURBO_STREAM request
  8.     &quot;Accept&quot;: &quot;text/vnd.turbo-stream.html&quot;
  9.   }
  10. })
  11. .then(response =&gt; response.text())
  12. .then(text =&gt; Turbo.renderStreamMessage(text));

https://turbo.hotwired.dev/reference/streams#processing-stream-elements

https://developer.mozilla.org/en-US/docs/Web/API/Response/text

huangapple
  • 本文由 发表于 2023年2月27日 15:53:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/75577949.html
  • ruby-on-rails
  • turbo
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定