Coffee Script to Select Dynamic Form Fields not working in Firefox

Question

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.

Answer 1

After some hacking and trial/error I was able to come up with this edit to the CoffeeScript which works in all browsers. It seems the prepend method wasn't functioning correctly in the latest version of Firefox so I included a blank option then added the facilities options array in one line.

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 and include a blank option at the top
      $('#call_transfer_from_id').html("<option value=''></option>" + options)
      # Ensure that the blank option is selected
      $('#call_transfer_from_id').attr("selected", "selected")
    else
      $('#call_transfer_from_id').empty()

  $('#call_region_id').change ->
    update_facilities()

  update_facilities()