So I started playing around with turbo, faced the issue of the form validation errors and saw that it was addressed by turbo-rails 0.5.3. I upgraded the gem, ran rails turbo:install again and tried to implement it, but don’t know what I do wrong. The “new.html.erb” is rendered without full page reload, but the whole page content is replaced instead of just the frame.
I don’t have any issue when the form is submitted without errors. The new book is appended to the index, the form is reset without a full page reload and everything works, fine, I can submit again, etc. But when form validation fails, I expect to have the content of the ‘create_book’ frame to be replaced by the error div (illustration purpose) and have the rest of the page remain the same. Instead, I end up with just the error div, without the rest of the page (and without page reload). The 422 response is shown below. What am I missing ?
PS: If you want to take a look, I played around a bit and made a full datatable with search, filter, inline cell edition, etc. (missing form validation for now though :p). Very glad to be able to do this with limited JS. Heroku so 30sec load time. https://hotwire-datatable.herokuapp.com/
Ok, I found out why it was not working, but don’t understand why.
I replaced in index.html.erb <%= turbo_frame_tag 'create_book', src: new_book_path, target: '_top' %>
by <%= turbo_frame_tag 'create_book', src: new_book_path %>
and voilà, it works. So if anybody as insights as to why it did not work / can explain what exactly is ‘target’ / how ‘target’ exactly works, I’d be happy to hear about it.
target="_top" is an attribute used on Turboframes that forces a full page visit as opposed to just the frame being replaced. You can read about it in the Turbo reference.
I don’t think this is intentional. As I mentioned, I managed to replace only the frame on a 422 response by removing the target: _top attribute. Are you sure you are using the latest version of turbo / of the gem ? Do you want to share your code ?
You’re right. I believe the behaviour I was experiencing had to do with how I was submitting my form. I was submitting the form in my stimulus controller with Turbo.navigator.submitForm().
When I try a different approach using a hidden submit button which I click() in my stimulus controller, the frame is replaced with the new frame as desired and expected.
Hi. Not sure why but the code does not work as it does in the demo on Heroku. Specifically, creating a new record returns 406 error and reloading the page shows newly created record (editing records works as it does in the demo).
Also, live search stops after the first character is typed or a search term is pasted in and returns whatever results match what is typed or pasted in (pasting an entire word, for example, returns the results as per the demo site).
