Coffeescript is not displaying alert after a value is selected in a form_for using rails 4.0

Question

I am using form_for a :quote resource. I would like to perform an action when the first field (a collection_select) has been changed. I am also using fields_for :bikes which has_many quotes

Here is my code right now:

quotes/new.html:

<% provide(:title, 'New Quote') %>
<h1>Get a Quote</h1>
<div class="row">
  <div class="span6 offset3">
    <%= form_for @quote do |f| %>
        <% if object.errors.any? %>
            <div id="error_explanation">
                <div class="alert alert-error">
                    The form contains <%= pluralize(object.errors.count, "error") %>.
                </div>
                <ul>
                    <% object.errors.full_messages.each do |msg| %>
                        <li>* <%= msg %></li>
                    <% end %>
                </ul>
            </div>
        <% end %>
        <%= f.fields_for :bikes do |builder| %>
            <%= f.label :make, 'Make' %>
            <%= f.collection_select :make, Bike.unique_by_make, :id , :make %>

            <%= f.label :model, 'Model' %>
            <%= f.text_field :model %>

            <%= f.label :year_manufactured, 'Year' %>
            <%= f.date_field :year_manufactured %>
        <% end %>
        <%= f.submit "Show Quote", class: "btn btn-large btn-primary" %>
    <% end %>
  </div>
</div>
<%= link_to 'Back', quotes_path %>

quotes.js.coffee (updated):

ready = ->
    $('#quote_bikes_make').change ->
        chosen = $(this).find(":make")
        alert chosen.data("desc")
$(document).ready(ready)
$(document).on('page:load', ready)

I am using #quote_bikes_make because I see this in the rendered HTML: select id="quote_bikes_make"

Is there a `#quote_bikes_make` in the DOM when you try to use it? — mu is too short, Oct 05 '13 at 22:15
I am unsure how to test whether `#quote_bikes_make` is in the DOM.... I am googling now. — IkegawaTaro, Oct 05 '13 at 22:24
Just a `console.log($('#quote_bikes_make').length)` above your `$("#quote_bikes_make").change ->` is a quick'n'dirty way to check. If that says 0 then it isn't there. — mu is too short, Oct 05 '13 at 22:39
ok - i added that and in my browser js console, the output is 0. So I guess it is not in the DOM. — IkegawaTaro, Oct 05 '13 at 23:09
You just need to run your `$(...).change ->` stuff in a document-ready hook, see http://stackoverflow.com/a/18770589/479863 for some options. — mu is too short, Oct 05 '13 at 23:34
hmmm.. I tried running in a `ready = ->` and a `jQuery ->` hook but neither works.... — IkegawaTaro, Oct 08 '13 at 00:27

score 1 · Accepted Answer · answered Oct 08 '13 at 01:19

1

@mu is too short was right in that I needed to put the coffeescript in a ready hook (see updated code above). However, this alone didn't solve the problem. I installed the jquery-turbolinks gem which did the trick.

answered Oct 08 '13 at 01:19

IkegawaTaro

3,563
5
21
26

jquery-turbolinks patches `$(document).ready` to know about the turbolinks events, right? – mu is too short Oct 08 '13 at 04:28

Coffeescript is not displaying alert after a value is selected in a form_for using rails 4.0

1 Answers1