diff --git a/Gemfile.lock b/Gemfile.lock index 8b9ac58..b373ab9 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -179,7 +179,7 @@ DEPENDENCIES wdm (~> 0.1.1) RUBY VERSION - ruby 3.3.1p55 + ruby 3.3.3p89 BUNDLED WITH 2.5.3 diff --git a/_posts/2024-06-11-update-full-page-on-form-in-frame-submit.markdown b/_posts/2024-06-11-update-full-page-on-form-in-frame-submit.markdown index b6a8649..ec8c64e 100644 --- a/_posts/2024-06-11-update-full-page-on-form-in-frame-submit.markdown +++ b/_posts/2024-06-11-update-full-page-on-form-in-frame-submit.markdown @@ -2,6 +2,7 @@ layout: post title: "How to refresh the full page when submitting a form inside a Turbo Frame?" date: 2024-06-11 +last_modified_at: 2024-10-07 categories: articles tags: rails hotwire turbo turbo-frames forms --- @@ -48,7 +49,7 @@ def create @record = Record.create(record_params) if @record.valid? respond_to do |format| - format.turbo_stream { render turbo_stream: turbo_stream.action(:refresh, "") } + format.turbo_stream { render turbo_stream: turbo_stream.refresh(request_id: nil) } format.html { redirect_to :index } end else @@ -60,6 +61,12 @@ An important assumption of this approach is that you want to modify the current **Use when** you need to show errors and the happy path leads back to the same page. +> You're probably wondering, why `request_id: nil`? By default Turbo will ignore refreshes that result from requests +> started from the current page. This is done to avoid double refresh when we make a change which then broadcasts a +> refresh through ActionCable. +> However, in this case this is exactly what we want to do so we have to clear request id. +{: .prompt-info} + ### Use custom full page redirect stream action If instead of modifying the current page you want to either show errors or move to a different page, you'd normally use a redirect. But this will not work with Turbo because it would redirect only the Turbo Frame. If you want to redirect the full page you'll need to create a [custom stream action](https://turbo.hotwired.dev/handbook/streams#custom-actions){:target="_blank"}. Custom stream actions allow us to expand the default list of stream actions that Turbo provides.