Rails 4 CoffeeScript not executing when precompiled

Question

I have a Rails 4 application with some Coffeescript that is mostly used to update lists upon selection of an item in another list - pretty basic stuff.

The script works perfectly in development. However, as soon as it is precompiled, even though I see the actual code in the precompiled asset file, it will not run at all.

I reduced the code to a very minimal scope, so all it does is display an alert if a combo box is changed and still not working. I also removed all .coffee files from the assets/javascript directory to only leave this one Coffeescript file and the application.js file to ensure there are no conflicts with other .coffee files.

I also had suspicion about turbolinks, which I then removed and still no change.

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .

attendance.coffee

  $('#season_id').on "change", ->
     alert('Success!')

The form from app/views/attendances/_form.html.erb

<div class="container">
    <form action="/attendances/get_attendance_sheet" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" />       <table class="table">
            <tr>
                <td>Saison:</td>
                <td><select name="season_id" id="season_id" class="form-control"><option value="">Choisir une saison</option><option value="1">Gadbois 2015</option></select></td>
                <td>Entraînement du:</td>
                <td><select name="session_id" id="session_id" class="form-control"><option value="">Choisir une date d&#39;entraînement</option><option value=""></option></select></td>
                <td><input type="submit" name="commit" value="Ouvrir" class="btn btn-success" /></td>
            </tr>
        </table>
</form></div>

Could you try $(document).on 'change', '#season_id', -> alert 'Success'? — Leonel Galán
– Leonel Galán, Commented Jun 13, 2016 at 20:43

Pascal · Accepted Answer · 2016-06-13 21:11:40Z

1

Finally found the problem, many thanks to @itsnikolay. The problem was due to the fact that another javascript file was throwing an exception. By having them all compiled into one single file, the exception would make the whole script stop running, thus not executing the Coffescripts.

In this particular case, it was due to the gem rails-assets-tether that was missing to provide tooltips from the bootstrap library.

When in debug mode, since, all javascript files are loaded independently, exceptions from one file doesn't affect loading the other ones.

answered Jun 13, 2016 at 21:11

Pascal

115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

skovy Over a year ago

Thank you! Completely glossed over this fact. "When in development environment, since all javascript files are loaded independently, exceptions from one file doesn't affect loading the other ones." The tether exception was the culprit.

nikolayp · Accepted Answer · 2016-06-13 17:58:04Z

0

Check you compiled javascript file (http://yousite.net/application-[DIGEST].js . Is there season_id? If season_id present, then try to change your code on:

$ ->
  $('#season_id').on "change", ->
     alert('Success!')

answered Jun 13, 2016 at 17:58

nikolayp

18.1k4 gold badges69 silver badges68 bronze badges

10 Comments

Pascal Over a year ago

I changed as suggested and got this compiled code: (function() { $(function() { return $('#season_id').on("change", function() { return alert('Success!'); }); }); }).call(this); Still nothing happening.

nikolayp Over a year ago

@Pascal because you have two season_id on the page, leave just one

nikolayp Over a year ago

@Pascal and if it won't work, try change the line on following one: $('#season_id').first().on 'change', ->

Pascal Over a year ago

I only see one season_id. The other one is session_id. Unless you reffer to the id and name tags, which should not interfere with each other to my knowledge.

nikolayp Over a year ago

try to execute in your Chrome console $('#season_id'), and paste its result in comment

|

Collectives™ on Stack Overflow

Rails 4 CoffeeScript not executing when precompiled

2 Answers 2

1 Comment

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related