Encountering an issue with rendering a collection of options in a nested field due to dependency on a filled-in value in the form.
Suspecting that targeting a new input field with a unique ID for each nested input field may provide the solution, but open to corrections if my assumption is incorrect.
Context
Rendering an order form involves automatically generating the first field of 'order_options' which connects orders and options in a many-to-many relationship. The form includes a field to select a bike_type with specific options related to that bike type. Depending on the chosen bike_type, the form displays a picklist with corresponding options. This part of the program functions correctly.
The Issue
When adding another option via Cocoon's link_to_add_association, users should see the same picklist of options as the bike_type remains unchanged. Additionally, the previously selected option should remain visible (i.e., not cleared). However, in the current setup:
- The previously selected code gets deleted (to clear the picklist in case the bike_type changes)
- The newly added nested form does not include any options (possibly because it only uses the bike_type options from the initial form field)
Form
<%= simple_form_for [@bike_store, @order] do |f|%>
...
JavaScript/Ajax
<script>
// Dynamic bikes
...
</script>
Nested Form
<div class="nested-fields">
...
</div>
Order Controller
class OrdersController < ApplicationController
...
The attempted callback:
// Dynamic options for nested form
...