I'm always having the same problem with all of my views that have multiple records with turbo.
I have a list of recipients, each with its own partial:
<div class="card px-6 py-4 rounded-xl bg-white mb-4 shadow" id="recipient_stock_card_<%= recipient.id %>">
<%= link_to select_stocks_recipient_path(id: recipient.id),
data: { turbo_frame: "select_stocks_modal" } do %>
<button class="btn btn-secondary text-black"><i class="icon icon-ui-22 text-2xl mr-2"></i> Asignar artículos a este destino</button>
<% end %>
</div>
Each partial has a button that will open a modal where the user selects stocks:
<%= turbo_frame_tag 'select_stocks_modal', id: "select_stocks_modal", target: "_top" do %>
<%= render 'shared/grid_modal' do %>
<%= form_with model: @recipient, url: add_stocks_recipient_path, local: false, data: { turbo_frame: "_top" } do |form| %>
<section class="flex flex-wrap lg:flex-nowrap">
<div class="p-8 w-full md:w-1/2 lg:2/3 flex-grow">
<h1 class="font-bold mb-3">Selecciona los artículos y cantidades a enviar a este destino:</h1>
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 "> <!-- Adjust the number of columns as needed -->
<% @stocks.each do |stock| %>
<div class="stock-item flex flex-col mb-5 card bg-white p-3">
<% if stock && stock.product && stock.product.product_images.attached? %>
<%= image_tag(stock.product.product_images.first.variant(:thumb), class: " w-40 h-40 mx-auto shadow-xl rounded-3xl", alt: stock.product.name) %>
<% end %>
<div class="stock-details flex flex-col justify-between h-[140px] mt-5">
<p class="text-lg font-bold flex-grow"><%= stock.product.name.truncate(80) %></p>
<p class="text-md text-primary mb-4 font-bold">En stock: <%= stock.current_stock %></p>
<%= number_field_tag "selected_stocks[#{stock.id}]", nil, min: 0, max: stock.current_stock, class: 'quantity-input input', placeholder: 'Cantidad' %>
</div>
</div>
<% end %>
</div>
</div>
<div class="actions w-full md:w-1/2 lg:w-1/3 bg-white rounded-xl p-8 sticky sticky-top top-0">
<h2 class="text-xl mb-5">¿Cómo enviamos tus artículos?</h2>
<select class="select select-bordered w-full mb-5"
data-controller="stocks"
data-action="change->stocks#toggleShippingMethod">
<option value="items">Enviar artículos sueltos</option>
<option value="packs">Enviar como packs</option>
</select>
<div id="itemsDiv" style="display: none;">
Los artículos se enviarán sueltos.
</div>
<div id="packsDiv" style="display: none;">
Montaremos packs con los artículos elegidos y se enviarán en packs.
</div>
<%= form.submit "Enviar estos productos", class: "btn btn-primary btn-large w-full mt-5" %>
</div>
</section>
<% end %>
<% end %>
<% end %>
Then, the controller on success will respond with Turbo:
def add_stocks
@user = current_user
@recipient = Recipient.find(params[:id])
@recipients = @user.recipients.where(stocks_assigned: false)
ActiveRecord::Base.transaction do
params[:selected_stocks].each do |stock_id, quantity|
quantity = quantity.to_i
next if quantity <= 0
stock = @user.user_stocks.find_by_id(stock_id)
next unless stock
@recipient.recipient_user_stocks.create!(user_stock_id: stock.id, quantity: quantity)
stock_adjust(stock, quantity)
end
@recipient.update!(stocks_assigned: true)
end
respond_to do |format|
format.turbo_stream do
render turbo_stream: [
turbo_stream.replace("recipient_stock_card_#{@recipient.id}",
partial: "recipients/recipient_stock_card_success", locals: {recipient: @recipient}),
turbo_stream.remove("select_stocks_modal")
]
end
end
end
It works fine for the first record saved. But everytime I click on a second record after the turbo update, I get the error 'content missing'.
¿Any idea why Turbo is failing once responded succesfully for the first record?
Thanks!