#152 Custom Turbo Streams. How to redirect from a form that is inside a turbo frame?

19/11/2023
Free
hotwire turbo frames modals

How to redirect from a form that is inside a turbo frame?

This is a very specific question that you will definitely have after working with Hotwire for some time.

There are many possible solutions, some better that the others.

Let's explore the problem and different strategies to solving it:

  1. add and click a hidden link
  2. new turbo stream redirect action
  3. adding turbo stream helpers and params

0:00 Introduction
0:49 Full page redirect does not work?
4:00 Break out of turbo frame does not work?
4:55 turbo stream hidden link
10:50 do not cache hidden link
12:42 Create a New Turbo Stream Action (best redirect)
14:56 A Turbo Stream action with params (more complicated)
19:50 Final demo

Episode source code: https://github.com/corsego/151-dialog-turbo-modals/commit/c2cecbae1da1e327f8ad91c403531a8ec738a3d1
Based on this blogpost: https://blog.corsego.com/custom-turbo-stream-actions

0
Sign in to join the conversation

Current playlist

#59 Hotwire Turbo Streams CRUD #60 Hotwire Turbo Streams Autocomplete Search #63 Hotwire Modals (the right way)
+28
Just enough Hotwire for Rails developers
#1

#59 Hotwire Turbo Streams CRUD

40:56
#2

#60 Hotwire Turbo Streams Autocomplete Search

27:28
#3

#63 Hotwire Modals (the right way)

21:15
#4

#65 Hotwire SPA: Flash Messages

27:34
#5

#66 StimulusJS: Targets, Values, Classes. Build a PRO dropdown

34:30
#6

#67 Streams: Infinite Scroll Pagination

18:06
#7

#68 Frames: Infinite Scroll Pagination

17:47
#8

#69 Frames + Streams: Infinite Scroll Pagination (Best approach)

08:40
#9

#70: Hotwire: Live form validations and previews

18:46
#10

#73 Hovercards with Hotwire Turbo Frames

14:03
#11

#75 ActsAsVotable: likes, bookmarks, hotwire, vote scopes, cached votes

52:20
#12

#80 Dynamic Forms with Turbo (not JS approach)

18:23
#13

#81 StimulusJS: Conditionally display form fields based on selected value

08:21
#14

#82 Chained Select Fields in a form. Gem City-State

22:56
#15

#84 Cookies Consent Banner

10:10
#16

#98 Inline editing attributes with Hotwire

14:38
#17

#99 Hotwire: Search and Infinite Pagination (Ransack with Pagy)

17:26
#18

#100 Browser tab title notifications

16:43
#19

#110 Realtime Online User Tracking with Actioncable, Kredis, Turbo Broadcasts

24:13
#20

#113 Kredis Live counter, HTTP vs Websocket Turbo Broadcasts

13:59
#21

#119 Trello Clone. Advanced Kanban Drag and Drop Sortable Lists with Hotwire

42:19
#22

#121 Turbo Broadcasts CRUD Demystified

24:20
#23

#143 Turbo Permanent: persist Audio Video and Search results while navigating pages

06:30
#24

#144 Why I am replacing Turbo Frames with Streams for ActsAsVotable?

09:17
#25

#148 DataTables without page refresh using Hotwire Turbo Frames

10:59
#26

#151 Advanced Hotwire modals

21:29
#27

#152 Custom Turbo Streams. How to redirect from a form that is inside a turbo frame?

20:37
#28

#153 Refactoring Hotwire Modals

10:03
#29

#156 Turbo 8 Morphing in real life

32:58
#30

#163 Instant page loads with Turbo 8 prefetch (aka InstantClick)

06:01
#31

#181 Search and Autocomplete French Company Information

00:00