CODEWITHSUNDEEP
jqueryruby-on-railshamlasset-pipeline
steven_noble
steven_noble

Reputation: 4203

Why won't the asset pipeline find my JQuery?

I'm trying to use a JQuery plugin in a Rails 3.2.8 app.

Relevant code follows...

In the /app/views/layouts/application.html.haml file:

!!!
%html
  %head
    = javascript_include_tag :defaults
    = javascript_include_tag '/assets/nospam.js'

In the /public/javascripts/application.js file:

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require nospam

In the /app/assets/javascripts/nospam.js file:

$('#my-email').html(function(){
  var e = "me";
  var a = "@";
  var d = "mysite";
  var c = ".com";
  var h = 'mailto:' + e + a + d + c;
  $(this).parent('a').attr('href', h);
  return e + a + d + c;
});

In the /app/views/layouts/index.html.haml file:

%p
We love email, so why not send a message to
%a{:href => "#"}
  %span#my-email please enable javascript to view
and let us know what's on your mind.

In the Gemfile:

gem 'jquery-rails'

group :assets do
  gem 'jquery-ui-rails'
end

I have run bundle install and restarted the server but the plugin isn't working and in Chrome's Javascript console I'm getting this error:

GET http://localhost:3000/assets/nospam.js 404 (Not Found)

In rails console, I get:

Rails.application.config.assets.paths
 => ["/Users/steven/Dropbox/testivate/app/assets/javascripts", "/Users/steven/Dropbox/testivate/app/assets/stylesheets", "/Users/steven/Dropbox/testivate/vendor/assets/javascripts", "/Users/steven/.rvm/gems/ruby-1.9.3-p194/gems/jquery-rails-2.1.3/vendor/assets/javascripts"]

I've got this working for now by disabling the assets pipeline but I know I should re-enable it eventually for performance reasons.

What should I do to make it work?

Thanks,

Steven.

Upvotes: 3

Views: 424

Answers (2)

danneu
danneu

Reputation: 9444

My guess:

The asset pipeline compiles the app/assets directory to the public directory.

Since your application.js manifest is in the public/javascripts directory, the asset pipeline is not considering it (asset pipeline doesn't compile assets in the public directory, it's where it puts compiled assets). So move it to app/assets/javascripts/application.js.

All you need in your layout is:

= javascript_include_tag :defaults

Make sure nospam.js is located at app/assets/javascripts/nospam.js.

app/
  assets/
    javascripts/
      application.js
      nospam.js

Your manifest looks right to me. Just looks like files aren't in the right place.

Upvotes: 0

Max Dunn
Max Dunn

Reputation: 1244

Take out the line:

/app/views/layouts/application.html.haml

= javascript_include_tag '/assets/nospam.js'

The nospam.js file will already be compiled into the application.js file so there is no need to include it separately.

Also, you need to make sure your JQuery code executes after the html it refers to, so add a $(document).ready line like this:

/app/assets/javascripts/

$(document).ready(function () {
  $('#my-email').html(function(){
    var e = "me";
    (etc...)

Upvotes: 3

Related Questions