Hotwire Modal Forms Discussion
Thanks a lot for this video! I see it's becoming a trend to add a format.turbo_stream response in all my controllers only if it fails.
Instead I would like to have a way to show errors but attached to each input element like the client_side validations gem does or the optimist gem. That would be really awesome!
This is ace. Good to know you can re-render a partial as you go, it would be cool to see some other examples of this.
Any chance someone could shed light on how to do this same thing but with turboframes?
I'm interested in the differences as well, but I'm not sure there would be any benefit to using turboframes in this instance.
My understanding is that rather than replacing our form partial with a custom format.turbo_stream, we'd wrap the form in a turboframe and replace that with the standard format.html response.
However, in the video, Chris mentioned that if we used frames for the error handling, we won't be able to redirect easily out of the modal because we would be stuck inside the frame.
I believe may be solved by adding data-turbo-frame to our submit button:
Sometimes you want most links to operate within the frame context, but not others. This is also true of forms. You can add the data-turbo-frame attribute on non-frame elements to control this
https://turbo.hotwire.dev/handbook/frames#targeting-navigation-into-or-out-of-a-frame
I haven't tested this and wonder whether it would mess with the modal being opened or closed.
Can you please report back if you get a chance to play with the code for this episode to experiment with frames?
yeah easily possible, i've managed to implement a hello world in this.
the trick is to have the new_room (or new chat/tweet or whatever your model is) OUTSIDE the modal form, so that when it is cancelled, you can still access a completely new form by hitting that button again.
the form is fetching using the turbo frame, and you simply use a stimulus controller to initialize it, and you can when you disconnect the controller simply hide it. It's simple enough and works like a....something that works really well.
Solid lesson, Chris! I do miss one tiny issue though :(
When saving the form and it has errors all is good - but when the form is good!?
Remember - you're on the index.html.erb already and opening a modal will afford you to prepend new posts on /posts across all tabs/connected users, and all is great.
I can format.turbo_stream { render turbo_stream: turbo_stream.remove( "post_form" ) } but that does not close the modal and will leave me with "an empty" DIV if I somehow manages to get the modal.hide() working. A "how to attach to the webhooks of Turbo really would come in handy <3
And then there is the 'edit' action on the modal too - same song more or less.
In your html data-action="turbo:before-render@document->remote-modal#hideBeforeRender turbo:before-fetch-response@document->remote-modal#hideAfterCreate"
In your stimulus controller
hideAfterCreate(event) {
if (event.detail['fetchResponse']['response']['status'] === 200) {
this.modal.hide()
}
}
How did you get the nice styling right off the bat with scaffolding?
always value. But what happened to the download functionality. I frequently pause & re-wind; having the copy locally is time & bandwidth-friendly...
Hello Chris, I'm waching this video and the one for devise, is there a way to combine a model authentication form with hotwire, I had success when I login, I haven't beeing able to handle the errors in a modal way b/c of warden.authenticate!(auth_options), do you know if this is possible to make?
*** Just 'fix' it, I use a remote form for the login modal and a stimulus controller for the ajax responses
I have two models, Post and Comment, the validation message doesn't show up when creating a comment. the rest are working fine except the validation doesn't show up.
Thank you Chris, this so good, how can I do this with edit, so it populates the field
I did implement something like that here: https://webspoon-ruby.herokuapp.com/
Here is the repo: https://github.com/acushlakoncept/webspoons-assignment
Just went through this. Great tutorial! Everything is working great except one thing for me. I have 3 flatpickr fields for date selection and start time / end time. When the form renders again due to validation errors it wipes out the flatpickr fields. Any thoughts on how I can have them render again when the form rebuilds to display the errors?
Solved the issue with this in case anyone else hits this problem. https://github.com/adrienpoly/stimulus-flatpickr
any idea how to use a modal with hotwire to load a modal for edit and how to append after submit?
At 1.16 you show the TURBO_STREAM format, mine are showing as HTML format but I have other hotwire features like the toasts, dynamic select fields and inline editing working, so hotwire must be installed? I'm using Rails 7, is there a different process I have to do to get it to always submit pages in the turbo_stream format?
