Hotwire Modals with ZERO JAVASCRIPT
Vložit
- čas přidán 1. 10. 2021
- A really quick run-through creating modals with Hotwire (no javascript required) in Rails 6.1. This approach relies solely on Turbo Frames and doesn't require writing any stimulus JS controllers.
Source code before:
github.com/phawk/hotwire-demo
Source code after:
github.com/phawk/hotwire-demo...
---
Has this video helped you out? Consider buying me a coffee to say thanks and support future content like this, thanks!
app.payhere.co/rapid-ruby/buy...
You can also find more content like this, including premium courses and exclusive community and mentorship to help you level-up! Head over to rapidruby.com and use the code RRCZcams for a discount! - Věda a technologie
It was really helpful Pete. Looking for more tutorial regarding rails hotwire. Thank you
👏👏👏👏 thank's for sharing Pete! Very good content
Best video on hotwire!! Ty so much!!!
It was really helpful.
Thank you
Thank you for sharing!
Solid stuff. I've been looking through a bunch of modal tutorials in Hotwire and they all seem to use the Streams approach to handle the errors. It's be great if there was a non-Streams way (since it adds some complexity); but, this seems to be the approach that I keep finding. Part of why Streams adds complexity is that if someone were to navigate to the "Add/Edit" page directly via the URL, interacting with the form wouldn't require Streams to work properly - it's only needed in the modal context. Anyway, good stuff - I'm just thinking out load.
Hey Ben that’s a great point! I kinda find in practise I’m not allowing the contents of a modal to be edited outside the context of the modal, but maybe that’s just being a lazy developer 😅
@@rapid-ruby I'm on like week-2 of learning Hotwire, so I'm just trying to find all the boundaries (where it does / does not overlap with traditional SPA mentality). In theory, I love the idea of things being _fully_ progressively enhanced; but, I'm also not entirely convinced that it's always worthwhile. At the end of the day, I'm just trying to build a good product - not necessarily make every UI accessible all the time. Anyway, I appreciate the conversation.
@@bennadeldid you ever find a solution you like for this? These types of nested UIs/routes are the things that tools like Remix or NextJS make quite simple. Being able to deep link into the modal feels pretty important to me in a lot of cases!
You are really good , take care bro)
The problem seems to be in reloading the whole page after submit the form. Notice that when you click "Update" you'll get "redirect_to show" in controller and it rerenders the whole page, not just the specific turbo frame. It would be nice if you have index page with some data (e.g. users), you can edit specific users within modal and then back to index without rerendering the whole page again (which means fetching again all users from database).
hey i followed your steps but i could not click on the submit button in the turbo fram tag. I don't see any errors either. Do you have suggestions on how to solve that?
For next videos Increase the font size and the audio volume please.
Hey @vasiovasio, thanks for the feedback, this is one of my first videos, hopefully the audio quality and volume are much better now, but you can let me know :)
Hey Pete, thanks for the videos; I've noticed when trying to render a partial as a turbo frame with Stimulus with an openModal() {
this.element.classList.remove("hidden");} function. -> it doesn't seem to work on displaying the modal box but I can get stimulus to close one? Any ideas (sorry if i'm not articulating the problem properly)
can you comment how if you needed to pass along some data with the button click for the modal to use , how you'd do that? for example, the profile ID ?
Hotwire works best with state on the server side, so you would just make the URL of the button contain all the info/id’s required. Hope that helps!
How do you recommend we implement the Cancel button? It's obviously easy with Stimulus, but was just wondering if you had another clever trick?
Sorry for the late response on this one, I missed it coming through! To keep with the zero javascript, you can link the button to the "show" action. So if your modal was edit_post_path(@post) for instance, you can link the cancel button to post_path(@post), because on that URL, the turbo frame tag for the modal will be empty, and thus, it will close the modal for you.
I'm confused how you just dropped in the tailwindUI modal component but where did the JS come from? I drop the same code in my app and nothing happens once the modal is showing (for example, to make it disappear). There doesn't seem to be any Stimulus, or even any JS, in your "source code after" repo
Hi John, the secret is in the title, “zero JavaScript”, there isn’t any other than the Hotwire library itself. Hope that helps!
@@rapid-ruby but in the tailwindui site, for the examples of the modals it says "requires javascript" (for the modals and I guess a few others). My understanding is that their site uses Alpine for the JS. yet yours worked just by dropping it in ?
p.s. thanks for this video in the first place. Yours is one of the only ones that shows that the thing that calls the modal needn't be inside the modal component.
@@rapid-ruby I just realized, too, that you don't really have a "cancel" button for the modal (or sometimes with modals cancel will happen if one clicks outside the modal itself). . You're depending on the Form's submit or cancel to send you back somewhere else. Out of curiousity if you don't use the Form's buttons, how would you get out ("cancel") the modal ?
@@johnquarto yeah so the tailwind site only shows alpine or react afaik. My video tutuorial is using Hotwire, so don’t need any additional JS
I'm getting "TypeError: Module specifier, 'application' does not start with "/", "./", or "../". Referenced from" when running my app on safari (v15). Do you also see this error by any chance?
Does the code still run ok? I think that error is due to import maps with safari, but it doesn’t affect it running?
Oh yeah, i thought my code wasn't working but it was just `dialog` tag not working on safari! HA!
Thanks for the response :)
Why did my comment get removed? I only said this was impressive how we are able to create truly interactive webbapps in Rails using zero Javascript.
Hi John, I didn't removed your comment, not sure what has happened, but thanks anyway :)
Is anyone try it with bootstrap? I couldn't make it with bootstrap
Hey Erdem, bootstrap adds quite a bit of complications if you want to use their models and their JavaScript together with Hotwire. I’d advise just using their styling and don’t use any of the bootstrap JS, instead rely on stimulus and Hotwire for any front end/JS needs.