Javascript not working in rails asset pipeline

Question

I had written some jQuery for a partial which resided in a js.erb file. This jQuery turned into general functions and I decided to put into the asset pipeline instead ie assets/javascripts/myfile.js and now the JavaScript is no longer working. I can see from the source code that the JavaScript is being loaded into the browser but it just isn't doing anything, but it was working before as a js.erb file.

What could be the problem?

In application.js I have

//= require jquery
//= require_tree .

Here is my js:

$(document).ready(function() { 
  $("#close").click(function(){
    $(this).parent().parent().slideUp("slow");
  });


  $(function() {
    $( "#datepicker" ).datepicker({
      dateFormat : "yy-mm-dd"
    });
  });

  var player_count = $("#player option").length;


  $('#btn-add').click(function(){
    $('#users option:selected').each( function() {
      if(player_count >= 8){
        $('#select-reserve').append("<option value='"+$(this).val()+"'>"+$(this).text()+"       </option>");
    $(this).remove();    
      }else{
        $('#player').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
        player_count++;
      }
    });
  });

  $('#btn-remove').click(function(){
    $('#player option:selected').each( function() {
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
      $(this).remove();
      player_count--;
    });
  });

  $('#btn-remove-reserve').click(function(){
    $('#select-reserve option:selected').each( function() {
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
      $(this).remove();
    });
  });

  $("#submit").click(function(){

    $("select option").prop("selected", "selected");

  });
});

I have noticed a new development, the js works after hitting reload. But whenever coming onto the page for first time (Direct from a link) it doesnt work.

Answer 1

This was a turbolinks problem. The solution was to wrap my coffeescript in this:

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)

Answer 2

Your application.js is loading myfile.js before jQuery. Assuming this file still contains jQuery code, it will not run correctly since jQuery is not yet defined. Does your browser's JS console say something like: "Uncaught ReferenceError: $ is not defined"?

Note that Rails usually generates an application.js that looks like:

//= require jquery
//= require jquery_ujs
//= require_tree .

Also, if myfile.js contains ERB code, then you need to rename it to myfile.js.erb as @Flauwekeul suggests.

Answer 3

I was having the exact same problem Jason Carty. Later on I found out that the issue was caused because I had:
= javascript_include_tag "vendor/modernizr"
= javascript_include_tag "application", 'data-turbolinks-track' => true
below "yield", in the bottom of my body tag. I moved it back to the top, after stylesheets and before "csrt_meta_tags", above my body tag and now works flawlessly.