Trying to work through a particular UX design, and here’s where I want:
- User is shown a form with a lot of dropdowns (they are mapping a CSV file to DB columns in the app)
- User changes a dropdown (the column mapping), which triggers a form post to rails
- Rails gives back two turbo frames to replace the form (with validation info) and another frame (an example mapping of their data) that is generated as they change the dropdowns.
Current issue is that a form submit to rails, and sending down frames DOES work, but the history / url changes so that a refresh of the page would cause an error. (Doing a get on a post route) This is intentional from Turbo, and has to work this way I understand due to the browser and history.
After some experimenting and discussion on another thread here, I’m working with vanilla js fetch() to “submit” the form via AJAX, get the same frames from Rails, then replace those frames myself from the returned HTML turbo-stream commands.
Rather than parse out this string and do the dom manipulation - surely there are functions in Turbo to do this, since it does this already with frames? Is there any way I can invoke Turbo via JS to take the returned string and do its normal work to replace the frames found within the string?
OR, am I totally doing this wrong, and there is a better, unobtrusive way?