1

I am trying to link a button to insert a form for a new item. I want to be able to add a new form for each button click using turbo frames. I am having trouble incrementing the id of each frame so a new turbo frame is added instead of just replacing the old one. I do not want the data to save in my database until the user is done adding items and it is validated.

On my new bulk items page...

<%= button_to 'Add One', new_item_path,
          data: { turbo_frame: dom_id(item.new)}, method: :get %>

<%= turbo_frame_tag dom_id(item.new) do %>
<% end  %>

On my new item page...

<%= turbo_frame_tag dom_id(item.new) do %>
  <%= simple_form_for [@item] do |f| %>
  <% end %>
<% end  %>

I saw a post that claimed success using this...

new_item_#{params.fetch(:index) + 1}

I have tried integrating it but get the same error 'param is missing or the value is empty: index', which I'm stuck on trying to pass in :index. How can I increment the index across both frames?

Brian
  • 11
  • 1
  • 1
    The [dom_id](https://apidock.com/rails/ActionView/RecordIdentifier/dom_id) helper will turn each passed in `Item.new` into the same id: `new_item`. The id has to be unique for turbo to correctly swap the button with the form. One solution can be to add a unique identifier as a prefix option. Are you iterating over list to display each "Add one" button? – Thomas Van Holder Oct 27 '22 at 07:03
  • I am not iterating over a list. I was just trying to use the same button to keep injecting empty forms. Do you mean I have to place the add new button inside the turboframe? – Brian Oct 27 '22 at 20:37

1 Answers1

0

If you only have a single "Add new" button, you could insert multiple new forms with the turbo stream append action.

As the new method in the controller responds to an incoming turbo stream request, you could tweak the response.

<%# new.turbo_stream.erb %>

<%= turbo_stream.append "items" do %> 
  <%= render partial: "items/form", locals: {item: @item} %>
<% end %>

The new form partial will be injected where you have defined the "items" id.

<%= button_to 'Add One', new_item_path,
          data: { turbo_frame: dom_id(item.new)}, method: :get %>
    
<li id="items">
 <!-- the injected forms will come be injected here -->
</li>
Thomas Van Holder
  • 1,137
  • 9
  • 12