CoffeeScript for dynamically selecting form fields when changing and when loading

Question

I have a Rails application in which I try to select a list of objects based on which region is selected on the form. So far I have implemented group_collection_select to do this, as well as a bit of CoffeeScript.

It works when creating a new record and choosing a region. The behavior is to show only the objects listed for the selected region. What does not work when editing a record, the choice of tools shows all the objects grouped by region, and not the restrictions of objects in the selected region.

If I select another area, and then select the original reason, a corresponding list of objects will appear.

I would like to learn how to reorganize CoffeeScript, where when editing an entry, the function starts both when the page loads (when editing) and when it changes.

Finally, there are cases where the transfer_from_id parameter is set to nil / blank, and we use a text field called transfer_from_other. Currently, if I do not select an object and do not fill out transfer_from_other, because CoffeeScript loads the objects in transfer_from_id, it will set transfer_from_id as the first object in the region. I would like to do this anywhere, if no object is selected, the value of transfer_from_id is zero, so I can use transfer_from_other.

This is what my code looks like:

calls.js.coffee

jQuery -> facilities = $('#call_transfer_from_id').html() $('#call_region_id').change -> region = $('#call_region_id :selected').text() options = $(facilities).filter("optgroup[label=#{region}]").html() if options $('#call_transfer_from_id').html(options) else $('#call_transfer_from_id').empty() 

region.rb

 has_many :facilities 

facility.rb

 attr_accessible :region_id belongs_to :region 

_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 :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 %> 

If my question and examples are not clear, let me know and I will gladly edit it.

Answer 1

As for updating the selection both on the page loading and when changing the selection, if I miss something, is it not enough just to cut out the update part for the update into your own function, which you then call once on the page load, and then each change of choice?

 jQuery -> facilities = $('#call_transfer_from_id').html() update_facilities = -> region = $('#call_region_id :selected').text() options = $(facilities).filter("optgroup[label=#{region}]").html() if options $('#call_transfer_from_id').html(options) else $('#call_transfer_from_id').empty() $('#call_region_id').change -> update_facilities() update_facilities() 

Regarding the second part, every time you update the selection #call_transfer_from_id , you lose the option blank. This second version adds and selects an empty parameter every time you select a region:

 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>") # Ensure that the blank option is selected $('#call_transfer_from_id option:first').attr("selected", "selected"); else $('#call_transfer_from_id').empty() $('#call_region_id').change -> update_facilities() update_facilities() 

Answer 2

So, I played with this problem, and I think I found a solution that works on both Chrome and Firefox respectively.

 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() 

I was able to reorganize and delete a line of code and set the parameters and an empty parameter in one line instead of using prepend. For some reason, Firefox did not like the prepend method. Therefore, calling this line: $('#call_transfer_from_id').html("<option value=''></option>" + options) I can pass parameters and insert an empty parameter at the beginning of the array.

So far I have tested both Chrome and Firefox, and it displays the following behavior.

When creating a new call, objects are limited by area, and an empty parameter is displayed in the selection field. If you enter another address transfer_from_ and leave the value transfer_from_id nil, it will save the value nil.

When editing a call with a crowded address transfer_from_other, transfer_from_id is no longer populated with the first object in the list, instead it indicates an empty (nil) option.

When editing a call with the assigned_from_id transfer, it retains the original value of the record and still limits the area.

Can you look at my code and see if it makes sense. I stumbled upon it this way and somehow made it work. Trying to understand why this works in both browsers compared to your answer, which only works in Chrome.