Ruby on Rails

63 + 142 = 151. Why?
In Ep 63 we learnt to build "modals" with Hotwire.
In Ep 142 we learnt to use the native HTML dialog element
Now let's combine them to create the perfect modal!
We will dive deep into navigating within a Turbo Frame and breaking out of it when needed.
We will render updates without page refresh on the background with Turbo Streams.
We will add a tiny bit of StimulusJS to control the modal.
We get to play with the whole Hotwire stack for this advanced behaviour!
I am really proud of this episode.
Episode source code: github.com/corsego/151-dialog...
Based on this blogpost: blog.corsego.com/turbo-modal-...
0:00 Turbo Dialog Modals demo
1:48 Copy HTML Dialog form Ep 142
3:13 Turbo Frame within modal
7:00 Navigation within modal
8:50 Close modal after create
12:40 Add new comment to the list
14:20 Clean up modal after close
17:01 Edit, Show, Destroy within modal
20:44 Perfect Turbo Modals: Final demo

[@NinjaBranDizzzle]

This tutorial series was incredibly helpful. Ive always wanted all my edits done through modals using stimulus and turbo frames. This helped me get exactly where I needed to be! Thank you so much for all your content and what you do!

[@njongefred]

Fantastic. Thanks to super rails ❤. Please do a tutorial on drop zone JS for drag and drop uploads using active storage

[@tomasvalent3876]

❤

[@dmitrykhoma371]

I love your videos very much! Please make video tutorial about gem “ancestry”!

[@SupeRails]

Hello Dmitro, thanks for the suggestion. I have heard of gem ancestry before, but did not have an opportunity to use it so far. I've added it to my todo list!

[@yanfroes]

Hey SupeRails Yaroslav! I followed your tutorial, but I'm fighting with select2 dropdown only appearing behind the dialog, I'm using bootstrap, any ideas?

[@SupeRails]

I also had similar issues when using TinyMCE. some js plugins do not apparently support HTML dialog. In this case you should go with my approach from Episode 63