Reputation: 3058
I have two selects, the second one changes according to the value of the first one. I use CoffeScript.
<%= f.collection_select :type, RequestType.order(:typeName), :id, :typeName,
{include_blank:true }, {:class => "types"} %>
<%= f.grouped_collection_select :subtype, RequestType.order(:typeName),
:RequestSubTypes, :typeName, :request_type_id, :subTypeName,
{include_blank:true},
{:class => "subTypes" } %>
jQuery ->
subTypes = $(".subTypes").html()
$(".subTypes").parent().hide()
$(".types").change ->
type = $(".types :selected").text()
options = $(subTypes).filter("optgroup[label='#{type}']").html()
if options
$(".subTypes").html(options)
$(".subTypes").parent().show()
else
$(".subTypes").empty()
$(".subTypes").parent().hide()
<%= link_to "link", new_request_path %>
Upvotes: 1
Views: 84
Reputation: 4147
I believe you're using turbolinks
. That's way your jquery bootstrap is executed once on the page you initially visit and does not hook up with the DOM of the other pages, hense your callback does not catch up.
You got couple options to deal with it.
Use an attribute data-turbolinks-track='false'
on the javascript_tag
in your layout head. That way the js file will be loaded and executed on each page load along with the body.
Move the entire javascript_tag
call to the bottom of your body
.
Use the jquery-turbolinks
gem.
Upvotes: 5