Reload page with turbo frame after modal form submit

Hello, I have a form inside a modal and the whole modal content is a turbo-frame element with an ID.

It’s working fine because when there are validation errors, the modal is re-rendered seamlessly with the error messages.

The problem is when the form is submitted successfully. Since I am redirecting to the same page with a success flash message, the modal is still in the page with the same ID and so all I get is a new empty modal rendered.

I would like, instead, to reload the page to show the flash message and show the success flash when the form is submitted successfully. I don’t want to always use the target="_top" because I’m fine with the modal reloading only the errors. I tried with the meta element rendered when form is submitted successfully but it didn’t work.

Is there a way to achieve this or I should re-factor my page and my form?


You may be interested in this thread

Thanks @tleish, really interesting discussion. I asked more info to elik-ru because he seemed to have the exact same issue as me and he was able to resolve with an additional frame. Unfortunately I didn’t understand the exact process.

I answered there :slight_smile: My solution broke in last turbo updated, but there is a workaround

Here is another solution to this problem (that works with the latest version of Turbo) that uses a turbo stream to perform a Turbo.visit: