I have a legacy Rails 3.2.14 app where I am trying to constrain a list of facilities by region via an association, grouped_collection_select, and some CoffeeScript. My original question is here: CoffeeScript to dynamically change form field on change and load. With some help we were able to solve the problem initially and implement the following behavior.
On Call create a region is selected and facilities are constrained by what region they belong to, this field is called transfer_from_id. When creating a call with an address not listed in the Facility model we use the transfer_from_other field to enter the address. When that happens, the transfer_from_id field is purposely left blank and a NIL is injected to prevent the CoffeeScript from auto-populating the first facility in the model.
When editing a call where transfer_from_id contains a value the transfer_from_id is displayed with the facility name in the form.
Originally the code below worked perfectly in Chrome, however when I went to test the behavior in Firefox on call create it would auto-populate the transfer_from_id field with the first facility in the list even though we prepend a blank option in the CoffeeScript. When editing a call, the same behavior is observed.
I'd like to figure out how to fix this problem in Firefox as we use this app cross-platform/browser. I really would like to get this feature working but I'm at a loss as to why it does not work in Firefox. I've used firebug to attempt to debug this however I do not see any errors in the console.
Below are excerpts from my codebase which might help illustrate what I'm trying to do:
calls/_form.html.erb excerpt
<%= f.label :region %>
<%= f.collection_select(:region_id, Region.all, :id, :area, {:include_blank => true}, {:class => 'select', required: true}) %>
<%= f.label :caller_name %>
<%= f.text_field :caller_name, :placeholder => 'Jane Smith', required: true %>
<%= f.label :caller_phone %>
<%= f.text_field :caller_phone, :placeholder => 'xxx-xxx-xxxx', required: true %>
<%= f.label :Transfer_From %>
<%= f.grouped_collection_select :transfer_from_id, Region.order(:area), :active_facilities, :area, :id, :facility_name, {include_blank: true}, class: 'select' %>
<%= f.label :Transfer_From_Other%>
<%= f.text_field :transfer_from_other %>
<%= f.label :Location_Of_Patient %>
<%= f.text_field :facility_from_location %>
<%= f.label :Transfer_To %>
<%= f.grouped_collection_select :transfer_to_id, Region.order(:area), :active_facilities, :area, :id, :facility_name, {include_blank: true}, class: 'select' %>
<%= f.label :Transfer_To_Other %>
<%= f.text_field :transfer_to_other %>
calls.js.coffee
jQuery ->
facilities = $('#call_transfer_from_id').html()
update_facilities = ->
region = $('#call_region_id :selected').text()
options = $(facilities).filter("optgroup[label=#{region}]").html()
if options
# Set the options
$('#call_transfer_from_id').html(options)
# Add in a blank option at the top
$('#call_transfer_from_id').prepend("<option value=''></option>")
else
$('#call_transfer_from_id').empty()
$('#call_region_id').change ->
update_facilities()
update_facilities()
facility.rb
belongs_to :region
scope :active, where(status: "Active").order('facility_name ASC')
region.rb
has_many :facilities
def active_facilities
self.facilities.active
end
I'm very new to CoffeeScript and my JS/jQuery skills are not very sharp right now so I could use some help on this to get it working cross-browser. Any tips or advice is greatly appreciated. I hope this is not considered a duplicate question, feel free to let me know if my problem is not clear or you need more information.
