Javascript works directly from view, but not when included in asset pipeline

Question

What am I missing to get my javascript working via the asset pipeline?

When I try using jQuery chained to work through the assets, it doesn't work properly, however when I put the javascript function directly into the view it works perfectly.

I've got the the jquery-rails and coffee-rails gems installed. I saved the jquery.chained.mini.js code to vendor\\assets\\javascript\\jquery.chained.mini.js.

I updated my application.js to include the plugin.

I included the

$("#series").chained "#mark"

script block into my app\\assets\\javascript\\vehicle.js.coffee file.

When the view loads, the following is listed under head-

<head>
        . Edited for brevity
        .
        .   
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
        <script src="/assets/equipment.js?body=1" type="text/javascript"></script>
        <script src="/assets/sessions.js?body=1" type="text/javascript"></script>
        <script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
        <script src="/assets/users.js?body=1" type="text/javascript"></script>
        <script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
        <script src="/assets/application.js?body=1" type="text/javascript"></script>  
        .
        .
        .
  </head>

The jquery plugin is there, as is the vehicles.js page. The source for vehicle.js comes out as follows-

(function() {
  $("#series").chained("#mark");
}).call(this);

This should make the drop down lists in the edit view depend on each other. However, all the options are available no matter what in the second drop down box.

If I put the script directly into the view though, as show below, it works perfectly.

edit.html.erb

<!DOCTYPE html>
<html>
<head>

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/equipment.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vehicles.css?body=1" media="all" rel="stylesheet" type="text/css" />

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>  

<meta content="authenticity_token" name="csrf-param" />
<meta content="PJnMEwkx/Ap2MQIHUsIcu0rYh+C6Or8VoVB9j2q9ptU=" name="csrf-token" />

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<div>
<select id="mark" class="span2">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option></select>
<select id="series" class="span2"><option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

<script type="text/javascript" charset="utf-8">
  $(function(){$("#series").chained("#mark"); 
  });
</script>

</div>

</div>
</body>
</html>

Can someone explain why the code isnt working on the assett pipeline but is when I put it into the view direct?

Answer 1

Try precompiling the assets:

bundle exec rake assets:precompile

http://guides.rubyonrails.org/asset_pipeline.html

and then restarting Rails.

Javascript works directly from view, but not when included in asset pipeline

Question

1 answers

solution1
0 2013-05-10 16:35:09

Javascript works directly from view, but not when included in asset pipeline

Question

1 answers

solution1 0 2013-05-10 16:35:09

solution1
0 2013-05-10 16:35:09