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

Пікірлер: 31

  • @dave_kimura
    @dave_kimura2 жыл бұрын

    Hello, creator of the original video. Even at kzread.info/dash/bejne/Y4WFm8xsqpq0d9o.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
    @user-mr8qh3hh9g10 ай бұрын

    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
    @NinjaBranDizzzle3 ай бұрын

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

  • @spd2258
    @spd22585 ай бұрын

    thank you for your teaching

  • @haroldpepete
    @haroldpepete Жыл бұрын

    That was really interesting, great video

  • @hadleysiqueira2734
    @hadleysiqueira273411 ай бұрын

    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?

  • @Obrezkasada
    @Obrezkasada Жыл бұрын

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

  • @cmthimmaiah
    @cmthimmaiah2 жыл бұрын

    Amazing, thanks a ton!

  • @johnrothfield6126
    @johnrothfield61262 жыл бұрын

    Thanks

  • @ahmedkamal200
    @ahmedkamal2002 жыл бұрын

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

  • @ahmedkamal200

    @ahmedkamal200

    2 жыл бұрын

    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

  • @paketankampus1663
    @paketankampus1663 Жыл бұрын

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

  • @jensdisselhoff8109
    @jensdisselhoff81092 жыл бұрын

    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

    @matthewpeacock9634

    Жыл бұрын

    try putting it below the

  • @tomasvalent3876
    @tomasvalent38766 ай бұрын

    👍👍👍

  • @viktorsmari
    @viktorsmari2 жыл бұрын

    How would you trigger showing the modal with Bootstrap 5?

  • @SupeRails

    @SupeRails

    2 жыл бұрын

    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

    @viktorsmari

    2 жыл бұрын

    @@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

    @SupeRails

    2 жыл бұрын

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

  • @SupeRails

    @SupeRails

    2 жыл бұрын

    @@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

    @viktorsmari

    2 жыл бұрын

    @@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!

  • @ddd2283
    @ddd22832 жыл бұрын

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

  • @muhammadmudasir367
    @muhammadmudasir3672 жыл бұрын

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

  • @SupeRails
    @SupeRails2 жыл бұрын

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

  • @aleksandarjeftic2847

    @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) }

  • @clementblgr6498
    @clementblgr6498 Жыл бұрын

    we cant use a StimulusJS controller to render TurboStreams anymore ?

  • @SupeRails

    @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.

  • @SebastianSastre
    @SebastianSastre5 ай бұрын

    Superb demo on turmo_frame/streams thanks for sharing this!

  • @johnrothfield6126
    @johnrothfield61262 жыл бұрын

    Could you why your approach is better?

  • @SupeRails

    @SupeRails

    2 жыл бұрын

    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.