I have a Ruby on Rails page that iterates through a group of entities to generate an edit form for each entity. It uses 3.4.3 of select2 for the select_tag.
Form:
#EditPublicPlacesForms
- @public_places.each do |p|
= form_for p, url: place_customer_path(@customer.id), html: { id: "place_#{p.id}" } do |f|
= f.label :service_profile_id, t('hss.views.subscribers.new.service_profile')
= f.select :profile_id, options_from_collection_for_select(@profiles, 'id', 'name', p.profile_id), {include_blank: true}, {'data-placeholder' => t('pro.views.customers.new.profile_selection'), id: "profile_id_#{pi.id}"}
<< other parts of form >>>
This form is displayed using a basic simplemodal dialog command:
$('#EditPublicIdentityForms').modal
minHeight: '40%'
minWidth: '50%'
Here's the use case: display the form, close the form, display the form again. The first problem is that the container.offset for the select2 is undefined on the 2nd display. This causes the select2 list to be displayed in the upper left corner of the page.
The second problem is that any other form generated will throw a javascript error "Uncaught TypeError: Cannot read property 'top' of undefined" when the select2 field is clicked. Therefore, I'm unable to edit any other items on the page after editing one.
I've tried generating a unique id for the select_tag. I've tried destroying the select2 in the modal onClose event. Why is it that the select2 is not associated with the original container on any subsequent displays? What is the simplemodal close dialog doing to the select2 container?
The problem appeared to be that simplemodal wasn't persisting the container. The container is not reconstructed on subsequent calls. Adding the option of persist:true in the modal call, the problem appears to be rectified.