Reload page with turbo frame after modal form submit

lukepass · June 13, 2023, 9:34am

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?

Thanks.

tleish · June 14, 2023, 12:02am

Ability to override frame-target from server response

opened 05:24AM - 23 Apr 21 UTC

acetinick

Currently if the response from turbo requests returns a redirect response whilst… inside a frame, there is no way for the server side to conditionally control what turbo to do with the response, eg. force a full page refresh with target="_top" There are use cases especailly for modal windows where upon succesful save we would want to perform a redirect back to the index page, where as 422 response would do the normal turbo frame replacement within current frame. It would be nice to support something like this, which will allow us to control targets from serverside to frame targets by setting frame target via the http response headers. ``` if @record.save response.headers["Turbo-Frame"] = "_top" redirect_to settings_locations_url else render partial: 'form', status: :unprocessable_entity end ``` What everyones thoughts are on this? or is there something I am missing to make this easier.

lukepass · June 14, 2023, 7:32am

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.

elik-ru · June 14, 2023, 8:01pm

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

andrewhavens · June 21, 2023, 10:03pm

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: https://github.com/hotwired/turbo-rails/pull/367#issuecomment-1601733561