Select fields, Coffeescript and Cocoon

Rails
1

Hello,
I have select field which after a choice happened, feeds another select
field.

Using the gem Cocoon to duplicate this set of select fields.
My problem now is to find a solution that the coffee script supplies
values
for each select field-set separately.

My code:

form
<%= render ‘usergroup_fields’, :f => usergroup %>
<%= link_to_add_association “Add Group”, f, :usergroups %>

usergroup_fields:
<%= f.select :ops_group_id, options_for_select(@groups……{ id:
‘ops_select’
} %>
<%= f.select :oncall_id, options_for_select(@oncalls….{ id:
‘oncalls_select’ } %>

Coffee:
$ ->
$(document).on ‘change’, (’#ops_select’), ->
$.ajax ‘/projects/update_oncalls/’,
type: ‘GET’
dataType: ‘script’
data: {
ops_group_id: $("#ops_select option:selected").val()

update_oncalls.js
$("#oncalls_select").empty().append("<%=
escape_javascript(render(:partial
=> @oncalls)) %>")

I think I need some reference to supply to the script but don’t know
how.
Any help would be great. Thanks

2

Am 23.04.2014 um 14:54 schrieb Walter Lee D. [email protected]:

One thing to remember, conceptually, is that you cannot replace the “innards” of
a select as if they were HTML without destroying its ability to react correctly to
scripting or user input. The only “bulletproof” way to update the contents of a
select is to set its options collection length to 0, then iterate over your
collection of data, using the new Option(text,value) constructor to build each
option. Doing it any other way will end in tears. This has nothing to do with
CoffeeScript or JavaScript and everything to do with browsers and the DOM.

Walter

Thanks Walter…

may be you have some code to demonstrate…so I get the idea ?

3

On Apr 23, 2014, at 2:24 AM, Werner wrote:

<%= link_to_add_association “Add Group”, f, :usergroups %>
dataType: ‘script’
data: {
ops_group_id: $("#ops_select option:selected").val()

update_oncalls.js
$("#oncalls_select").empty().append("<%= escape_javascript(render(:partial =>
@oncalls)) %>")

I think I need some reference to supply to the script but don’t know how.
Any help would be great. Thanks

One thing to remember, conceptually, is that you cannot replace the
“innards” of a select as if they were HTML without destroying its
ability to react correctly to scripting or user input. The only
“bulletproof” way to update the contents of a select is to set its
options collection length to 0, then iterate over your collection of
data, using the new Option(text,value) constructor to build each option.
Doing it any other way will end in tears. This has nothing to do with
CoffeeScript or JavaScript and everything to do with browsers and the
DOM.

Walter

4

On Apr 23, 2014, at 9:02 AM, Werner L. wrote:

Thanks Walter…

may be you have some code to demonstrate…so I get the idea ?

Sure. This is using Prototype.js for clarity, you’ll have to guess (I
don’t know) how to describe it in jQuery, if that’s your thing.

One Two Three Four

var new_options = [{“value”: “5”, “text”: “Five”}, {“value”: “6”,
“text”: “Six”}];
var foo = $(‘foo’);
foo.options.length = 0;
new_options.each(function(opt){
foo.options[foo.options.length] = new Option(opt[‘text’],
opt[‘value’]);
});

Walter