#63 Hotwire Modals (the right way)
13/02/2022
Gratis
⛔DO NOT use a StimulusJS controller to render TurboStreams!⛔
Extended text guide to this video: https://www.bearer.com/blog/how-to-build-modals-with-hotwire-turbo-frames-stimulusjs
- Git repo: https://github.com/corsego/63-hotwire-modals/commits/main
- TLDR: https://blog.corsego.com/hotwire-turbo-frame-modals
P.S. Feel free to add CSS p-5 bg-slate-300 absolute z-10 top-10 right-10 rounded-md w-96 break-words
to the modal, so that it shows nicely above page content.
0:00 Intro
0:49 App Demo
2:12 Create New App
3:20 Scaffold Posts
4:44 Turbo Frame Modal
7:40 Add validations...
8:50 No matching turbo frame
9:35 Turbo Stream - to add new post
11:25 StimulusJS - dismiss modal
17:30 Modal to EDIT a post
20:20 Outro
0
Inicia sesión para unirte a la conversación
Destacado en listas
![#59 Hotwire Turbo Streams CRUD](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4MiwicHVyIjoiYmxvYl9pZCJ9fQ==--7b4b94ff669cbcd3485cfcc3f72e9100df7eae48/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#60 Hotwire Turbo Streams Autocomplete Search](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1MywicHVyIjoiYmxvYl9pZCJ9fQ==--c95f098cc49b4d72ecb027c13735c1bedf44cb78/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#63 Hotwire Modals (the right way)](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg2MywicHVyIjoiYmxvYl9pZCJ9fQ==--29f62b39b302aa16a6e6c28453e036aaa724add0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
+28
Just enough Hotwire for Rails developers