Javascript not working in rails asset pipeline - Stack Overflow

admin管理员组

文章数量:1333625

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 i.e 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 ing onto the page for first time (Direct from a link) it doesnt work.

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 i.e 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 ing onto the page for first time (Direct from a link) it doesnt work.

• javascript
• ruby-on-rails
• asset-pipeline

Share Improve this question Follow edited Jun 22, 2013 at 10:34 Jason Carty asked Jun 19, 2013 at 17:03 Jason CartyJason Carty 1,24722 gold badges1313 silver badges1717 bronze badges 4

• What do you mean with "not working"? Does the js file need to be parsed by erb? – Flauwekeul Commented Jun 19, 2013 at 17:21
• I dont know if the js file needs to be parsed by erb. All I know is that the functions are not doing anything. – Jason Carty Commented Jun 19, 2013 at 17:39
• First check that u included the js in controller check this topic stackoverflow./questions/5017114/… – Navin Nair Kottayil Commented Jun 20, 2013 at 10:12
• @Navi I have tried with and without format js in the controller. No difference. – Jason Carty Commented Jun 22, 2013 at 10:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

ready = ->
// functions

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

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.

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.

本文标签： Javascript not working in rails asset pipelineStack Overflow