Question

I am trying to do cascading dependent select boxes using jQuery. I have the following in a file called “get_descriptions.js.erb”, which gets called just fine:

<% fields_for :person do |f| %>
    $("#descriptiondiv .floater:first").html("<%= f.select :description, @person.descriptions.map_by_person_type %>");
<% end %>

I can see in Firebug that the appropriate response is indeed returned, but nothing shows on the screen. Here is the exact response as reported in Firebug, with no errors:

$("#descriptiondiv .floater:first").html("<select id="person_description" name="person[description]"><option value="Employee">Employee</option></select>");

That response does not show up on the browser.

However, if I just do this:

<% fields_for :person do |f| %>
    $("#descriptiondiv .floater:first").html("hello world");
<% end %>

then “hello world” does indeed appear where I expect it to.

Why is my select box not rendering on screen, but “hello word” is?

Answer 1

Looks like a quoting problem to me, try adding an escape_javascript:

<% fields_for :person do |f| %>
    $("#descriptiondiv .floater:first").html("<%= escape_javascript f.select :description, @person.descriptions.map_by_person_type %>");
<% end %>

Or just j:

<% fields_for :person do |f| %>
    $("#descriptiondiv .floater:first").html("<%= j f.select :description, @person.descriptions.map_by_person_type %>");
<% end %>