From 61f6c528622c6fe63dd8ae2667f5c54700142928 Mon Sep 17 00:00:00 2001 From: Sean Doyle Date: Thu, 29 Feb 2024 08:18:09 -0500 Subject: [PATCH] Describe criteria for link and form morphing Expand upon the Page Refresh sections explaining how to morph and preserve scrolling. Page Refreshes --- A "page refresh" is a [application visit](/handbook/drive#application-visits) with a `"replace"` action to a URL with a whose [pathname](https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname) matches the current URL [path](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource). Page refreshes can be initiated by driving the page with a link, or by [redirecting after a form submission](/handbook/drive#redirecting-after-a-form-submission). In either case, the elements must have a `[data-turbo-action="replace"]` attribute: ```html Page refresh link
``` --- _source/handbook/03_page_refreshes.md | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/_source/handbook/03_page_refreshes.md b/_source/handbook/03_page_refreshes.md index 74daa71..a7b9327 100644 --- a/_source/handbook/03_page_refreshes.md +++ b/_source/handbook/03_page_refreshes.md @@ -11,6 +11,18 @@ A typical scenario for page refreshes is submitting a form and getting redirecte ${toc} +## Page Refreshes + +A "page refresh" is a [application visit](/handbook/drive#application-visits) with a `"replace"` action to a URL with a whose [pathname](https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname) matches the current URL [path](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource). Page refreshes can be initiated by driving the page with a link, or by [redirecting after a form submission](/handbook/drive#redirecting-after-a-form-submission). In either case, the elements must have a `[data-turbo-action="replace"]` attribute: + +```html +Page refresh link + +
+ +
+``` + ## Morphing You can configure how Turbo handles page refresh with a `` in the page's head. @@ -22,13 +34,13 @@ You can configure how Turbo handles page refresh with a `` in the page's head. +You can configure how Turbo handles scrolling when handling with a `` in the page's head. ```html @@ -37,7 +49,7 @@ You can configure how Turbo handles scrolling with a ` ``` -Server-side frameworks can leverage these streams to offer a simple but powerful broadcasting model: the server broadcasts a single general signal, and pages smoothly refresh with morphing. +Server-side frameworks can leverage these streams to offer a simple but powerful broadcasting model: the server broadcasts a single general signal, and pages smoothly refresh with morphing. You can see how the [`turbo-rails`](https://github.com/hotwired/turbo-rails) gem does it for Rails: