Ruby on Rails #63 Hotwire Modals (the right way)

⛔DO NOT use a StimulusJS controller to render TurboStreams!⛔
Extended text guide to this video: www.bearer.com/blog/how-to-bu...
* Git repo: github.com/corsego/63-hotwire...
* TLDR: blog.corsego.com/hotwire-turb...
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

[@dave_kimura]

Hello, creator of the original video. Even at czcams.com/video/1QQ9j3z7NGw/video.html, you can see where I am giving an option to avoid using a Stimulus Controller to render a TurboStream. The idea was to provide a backwards compatible solution when the JS fails. I'm sorry if this was not clear. Anyways, good luck with your channel. It's great to see other Ruby on Rails content out there.

[@user-mr8qh3hh9g]

I watched videos for a week trying to understand turbo streams and frames, Halfway through this video it made sense. Most of my problem was not understanding what was referencing what as far as variables. I LOVE how you show what is going where instead of making some stuff happen and saying do it like this. This was much needed and it has helped me to no end. THANK YOU!!!!

[@NinjaBranDizzzle]

Thank you so much for all your amazing videos, they are all so helpful!

[@spd2258]

thank you for your teaching

[@hadleysiqueira2734]

Thank you so much for the video! I would like to ask why not use something like render turbo_stream: turbo_stream.remove("modal") instead of using a stimulus controller. What am I missing? What are the pros and cons of your approach vs using turbo stream remove/update/replace? Wouldn't a if save render turbo_stream remove/update/replace also guarantee that the modal is only closed on success?

[@haroldpepete]

That was really interesting, great video

[@Obrezkasada]

could i locate empty turbo frame block on index page instead off remove in stimulus controller?

[@cmthimmaiah]

Amazing, thanks a ton!

[@johnrothfield6126]

Thanks

[@paketankampus1663]

but yaro, how you prevent page scroll when the modal are open?

[@jensdisselhoff8109]

Turbo-Frame didn't show in my implementation. Had to move the turbo_frame_tag "modal" from the layout to the view and finally it showed.

[@matthewpeacock9634]

try putting it below the

[@ahmedkamal200]

How did the app is created already styled with tailwind classes, do you use a gem for that ?

[@ahmedkamal200]

I got it , it's done by using the tailwindcss-rails gem
but the thing is, I also created the app using -c tailwind, but didn't get this gem
and that was because I also added --javascript esbuild, and in this case rails use the npm tailwind, not the gem

[@viktorsmari]

How would you trigger showing the modal with Bootstrap 5?

[@SupeRails]

opening the modal can be trigger by stimulus, I think. Here I give an example of triggering a bootstrap 5 tooptips & popovers with Stimulus: blog.corsego.com/rails-bootstrap-5-yarn
You can do something similar with modals

[@viktorsmari]

@@SupeRails And do it in the connect() like this?:
connect() {
var myModal = new bootstrap.Modal(document.getElementById('exampleModal')).show()
}
I don't like using the 'exampleModal' id, I would rather like to use Stimulus target, but the modal html lives in layouts/application.html

[@SupeRails]

@@viktorsmari not sure about the exact js inside, but I think it would also be connect()

[@SupeRails]

@@viktorsmari
🤔I really like the idea of "opening" modals with Turbo Frames/Streams by rendering new HTML on the page on-demand.
🖕In contrary to preloading "hidden" HTML and showing/hiding it with javascript (for example bootstrap modals)

[@viktorsmari]

@@SupeRails If you have time, it would be super useful to also have the Bootstrap 5 modal version on your blog, for those of us who don't use Tailwind 😋I am struggling with the BS5 modal. Thanks for the video!

[@tomasvalent3876]

👍👍👍

[@ddd2283]

Please video quality 1024. Good lesson! You english so good after indian :) Tons thanks!

[@clementblgr6498]

we cant use a StimulusJS controller to render TurboStreams anymore ?

[@SupeRails]

you can do whatever you like :)
Personally I see zero point in using JS to request an URL in a hotwire app.
the whole point of hotwire is writing less js and delegating request-responce to rails MVC.

[@SupeRails]

0:22 F̶r̶a̶m̶e̶s̶ Streams. The names get mixed in the head while speaking 😁

[@aleksandarjeftic2847]

Hi, appreciate your tutorials, they are super helpful. Create , edit and show actions work perfectly in modal with your method, but not sure how to remove record from the list. When I render show in modal, i have scaffolded button for destroy there, but when i destroy item, it gets removed from show in modal instead from the list. what should i do there ? this is what i use in the controller... format.turbo_stream { render turbo_stream: turbo_stream.remove(@post) }

[@johnrothfield6126]

Could you why your approach is better?

[@SupeRails]

Using a Stimulus controller to send turbo_streams is an awful practice. Also it does not scale.
Turbo Frames - to render self-contained view-controller logic.
Turbo Streams - to update html on a page based on trigger controller/model.

[@muhammadmudasir367]

sir daterangepicker not working in rails 7 please make a video on daterangepicker

[@SebastianSastre]

Superb demo on turmo_frame/streams thanks for sharing this!