Forum: Ruby on Rails Select fields, Coffeescript and Cocoon

9cc0604ff18606f7831cc4aa1f99ea0b?d=identicon&s=25 Werner (Guest)
on 2014-04-23 08:26
(Received via mailing list)
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
A47e0a6beeb9d048ff054fc1c3a97418?d=identicon&s=25 Walter Davis (walterdavis)
on 2014-04-23 14:55
(Received via mailing list)
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
9cc0604ff18606f7831cc4aa1f99ea0b?d=identicon&s=25 Werner Laude (Guest)
on 2014-04-23 15:04
(Received via mailing list)
Am 23.04.2014 um 14:54 schrieb Walter Lee Davis <waltd@wdstudio.com>:

>
>
> 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 ?
A47e0a6beeb9d048ff054fc1c3a97418?d=identicon&s=25 Walter Davis (walterdavis)
on 2014-04-23 15:35
(Received via mailing list)
On Apr 23, 2014, at 9:02 AM, Werner Laude 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.

  <select name="foo" id="foo" size="1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>

  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
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.