Even though I’ve done turbo with forms and thought I understood the limitations, I’m having trouble getting this to work the way I want.
I have a page with two turbo frames, “mapping” and “example”. Mapping contains a form which is a list of select dropdowns. Stimulus is used to have each select’s “change” event submit the form.
Form submits fine, and then my controller returns two turbo stream frames to replace the “mapping” and “example” frames. This renders fine, but what I’m seeing on the browser is that the submit is getting a redirect from the server, and then just renders the text of my turbo-streams, rather than replace the contents in the page. (Presumably because of the redirect.)
How do I stop turbo from redirecting after the form submit, and instead replace the frames on the page?
However, I just realized that when I’m submitting the form like this, even though I’m returning Turbo stream replace blocks, Turbo is not updating the frames on the page with the updated data. I added some validation messages and while I can see them in the response, Turbo isn’t updating the page to match.
When using the streams, turbo doesn’t update the frames, even though I’m sending them down and see them in my network tab.
This is when using either this.formTarget.requestSubmit or Turbo.navigator.submitForm(this.formTarget)
I’m thinking at this point I don’t have a good way to get the UX I want unless I just do AJAX calls and manage the response client side. Which is fine, I’m sure this is an edge case and not Turbo’s fault. I was hoping though that there was a way to make it work without additional JS.
Hey Dave if you are looking for standard AJAX behavior with a UJS like interface while still being able to use Turbo / Turbo Streams, I could point you in the direction of Mrujs. (A library I created intended to be a drop-in replacement for rails-ujs)