Dynamic Nested Forms with Turbo Discussion
This was great. I like the progressive enhancement(?) approach. Thank you.
Thanks, James! Yeah, progressive enhancement is a good description of it. A bit of a refactoring too as we were able to drop the stimulus controller completely. Happy to hear that you enjoyed the video! Thanks for watching.
Love everything about the screencast. The details, right speed and explanation. One thing i wished you would have explained is why the "task_field" action returns a turbo-stream automatically, without having to add code and tell it to respond_to turbo_stream. Seems a bit like magic
Thank you for the kind words and the feedback! To follow up, initially, the "task_field" endpoint does not automatically return a turbo-stream. In the second implementation when we use the RequestJS package to set a { responseKind: "turbo-stream" } on the request that the Stimulus controller makes, that's what triggers the endpoint to respond with a turbo-stream. Then when we remove the Stimulus controller and solely use Turbo, we set a data: { turbo_stream: true } on the link_to helper, that will also cause the endpoint to respond with a turbo-stream. Although the endpoint is empty during these two implementations, by default if a request comes in that wants a turbo-stream the endpoint can either list out how to respond to a turbo-stream request in the action or by convention look for a matching named turbo-stream view i.e. "app/views/projects/task_field.turbo-stream.erb". This is much like the convention of how a given action, let's say an index action of a Post controller, would look for a view at "app/views/posts/index.html.erb" by default unless instructed otherwise.
Hope this helps clarify that for you!
Can I make the suggestion that you start with a <10 second overview or visual of what you'll develop by the end? Although this was a great video, I had to watch for 14 min to see the totality of what you were going to produce. Fortunately I was interested in that investment, but often I'm on a fine line for a given episode's "is this worth 15 min of my time?". When one knows where you're going, it's much easier to follow. "I'm going on vacation to NYC" happens first, then I decide if I'm driving or flying and what museums to go to.
Totally agree with this comment and also feedback for all the publishers (ie Chris could do this also).
Thanks for taking the time to provide this feedback. The remaining videos that I have coming out for this year are already recorded but going forward I will be sure to keep this in mind and try to provide an opening overview in the videos. I appreciate the feedback!
Fantastic! Would love to see more content around complex/dynamic forms & turbo :)
Thanks! And thanks also for letting us know that you would enjoy more around these topics!
nice learning - but half an hours is quite a bunch of time - do you plan to offer a written version of the episodes like Ryan Bates had it with his RailsCasts? Then 30 minutes can become 3 minutes for those who have some pre-knowledge. Thanks.
Hey Muhammad,
Sorry that you feel the video is lengthy. At the moment, I do not plan to do a written version and I also don't know that it would be fair to folks that learn better from video to do such a quick video.
HI Collin, thanks for the help. For folks like Muhammad Härter, maybe some timestamps, like on YouTube, would improve him getting to what he wants.
This is a very helpful video! I'm trying to implement version 3 - full-turbo-get. For some reason, the link_to on the form page to add a second task is not executing a turbo_stream, but rather is executing the html partial. In my case, the link looks like this:
<%= link_to "Add a Student", chamber_music_entry_field_chamber_music_groups_path, data: { turbo_stream: true } %>
The turbo_stream is not executing - rather, it loads the html version as a new page. My project is running rails 7.0.3 and turbo 1.3.2. What could be causing this?
After further testing, I can get methods 1 and 2 to work correctly, but still method three seems to call the html xxx_field partial and not the turbo_stream partial when clicking on the link_to to add a second nested object.. I can't figure out why.
Another question - I need to pass an array into my equivalent of the task partial. How to I do this on method 2 when using the button_tag that calls the stimulus controller?
Did you figure out how to get the GET request to respond with the turbo_stream partial?
Having the same issue.
Just brilliant. I am new to rails and turbo so explaining things from the ground up with different versions really helps me understand what's going on there.
Thank you!
First of all, welcome to the Ruby community! I'm super glad to hear that the explanations are helpful for your understanding! Thank you!
A delete button to remove the nested field or _destory the nested field would be great to add to this tutorial
Thanks for the awesome tutorial! Any news on the delete follow up? Or can anyone else help with this in the meantime?
Hey Michael, I'm in the middle of moving at the moment and my new place won't be ready for a little while so I am not able to properly record any videos at the moment. But once I get set back up I can work on the follow up for delete. Unfortunately I don't have any solid estimate of when I will be able to get fully into the new place.
Full Turbo: There is an big problem with this approach. Let's say the task model has a validates :name, presence: true You add two tasks or more and when you submit the form (let's say leaving the name empty) it will come back and show you the error. However, in the next round (meaning again if you hit submit) it removes all the tasks and only keeps 1 task. Basically what is happening is this: When you submit and validation fails and the form is re-rendered, the task id for all the tasks are reset to the 1st task's id. Meaning, all the task will have the very first task's id of Time.now.to_i
Hey Aaron, in the video I just used Time.now.to_i initially to show that the fields need a unique value. Yes, re-rendering the fields when validation fails using the Time.now.to_i will cause the fields to all have the same value. It is a problem, but one with a simple fix which is to call task.object_id instead of Time.now.to_i in the app/views/projects/_task.html.erb partial.
Great video! The last implementation comes as a sorprise as in any good novel =) Great, thank you!
Hey Fernando! That's awesome to hear! I'm glad you enjoyed it and thanks for leaving your comment. Thanks for watching!
You need to delete the 'import RenderResponseController' entry from the app/javascript/controllers/index.js to have the app working with turbo stream implementation
I posted a question to Stack Overflow because I have a problem with the styling of the new rows added through turbo_frame: https://stackoverflow.com/questions/76536957/rails-7-turbo-stream-dynamic-table-wont-get-parent-table-style I hope you can help me with this... It works fine but the styling is not right
I have a question: I tried this thechnique in my app: <%= fields_for "purchase[purchase_details_attributes][#{ purchase_detail.persisted? ? purchase_detail.id : Time.now.to_i }]", purchase_detail do |ff| %> but I get a "undefined local variable or method `purchase_detail' for #ActionView::Base:0x00000000011670", within the calling form I issue this <%= render partial: 'purchase_line', collection: @purchase.purchase_details %>. What am I doing wrong?
I get this as params: #"qKvGxL2bY6ocX4aYK8-zarRvKGfkacBllfYkeU13RTan8kn3KnfsHJir80zYofjGx3edr6FfrHc8pLe6FVOh7g", "purchase"=>#"1", "fecha_compra"=>"16/11/2023", "fecha_vencimiento"=>"16/12/2023", "referencia"=>"6454564", "descuento"=>"0.12", "purchase_details_attributes"=>{"1700168757"=>{"cantidad"=>"10", "costo_unitario"=>"10", "precio"=>"", "id"=>"", "purchase_id"=>"", "product_id"=>""}}} permitted: false>, "bar_code"=>"01", "commit"=>"Grabar", "controller"=>"purchases", "action"=>"create"} permitted: false>. I don't get why I get the permitted: false. Anyone has a clue? Please...
I can get all 3 of these repos working, but for some reason I can't get any of them to work with Active Storage and file uploads. After I-
- Add a File Field to _tasks.html.erb
- Add has_attached to the model
- Generate the db tables
- Whitelist it in the controller attributes It never shows any sign of even trying to upload, not in dev tools or logs or anywhere. Has anyone else experienced this? I'd love to use Turbo, but most of my use cases with nested attributes include file uploads. Sigh...
I can get all 3 of these repos working, but for some reason I can't get any of them to work with Active Storage and file uploads. After I-
1. Add a File Field to _tasks.html.erb
2. Add has_attached to the model
3. Generate the db tables
4. Whitelist it in the controller attributes
It never shows any sign of even trying to upload, not in dev tools or logs or anywhere. Has anyone else experienced this? I'd love to use Turbo, but most of my use cases with nested attributes include file uploads. Sigh...