All threads / Hotwire Modal Forms Discussion

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Hotwire Modal Forms Discussion

Dicussion for Hotwire Modal Forms

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!

Reply

Great video, Chris, thanks!

Reply

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.

Reply

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.

Reply

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.

Reply

How did you get the nice styling right off the bat with scaffolding?

Reply

always value. But what happened to the download functionality. I frequently pause & re-wind; having the copy locally is time & bandwidth-friendly...

right now it essentially returns to the same URL (once clicked upon)

Reply
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 41,443+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2021 GoRails, LLC. All rights reserved.