0

I have been working on a ruby on rails project just now. I have created a controller named 'animals' and a view (index.html.erb) for index action. I don't want to include 'application' javascript file.

So I created animals.js

The file's content is

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= animals.coffee

I have also added animals.js and animals.css to asset.rb

Rails.application.config.assets.precompile += %w( animals.js )
Rails.application.config.assets.precompile += %w( animals.css )

My index.html.erb contains following lines

<%= stylesheet_link_tag 'animals', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'animals', 'data-turbolinks-track' => true %>

When I inspected source html code generated by server, I have seen that jquery scipts hadn't been included in the page. It was just animal.js file.

<head>
   <meta name="viewport" content="width=device-width, initial-  scale=1.0">
   <title>Rails Omniauth</title>
   <meta name="description" content="Rails Omniauth">
   <link rel="stylesheet" media="all" href="/assets/animals.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b5433a495991b7852b855.css?body=1" data-turbolinks-track="true">
   <script src="/assets/animals.self-1d93d37bf2f830ac42e82eb68e3bb0040ece5d23533a05bf77f7407fd59178d3.js?body=1" data-turbolinks-track="true"></script>

</head>

Any suggestions why these scripts had been inclued ?

Thanks.

Hilmi Yamcı
  • 463
  • 8
  • 20
  • So are you actually asking why jquery has **not** been included or why only your `animals.js` is included? – Niklas May 28 '17 at 20:41
  • yeap, It's my main problem. When I add <%= stylesheet_link_tag 'application',... instead of <%= stylesheet_link_tag 'animals',. I can see that jquery is added to the page. Actually, I can work around by addin – Hilmi Yamcı May 28 '17 at 20:46
  • So what is your question now? Do you realize the difference? I would recommend not to go this route though and just require application.js. You could also create a second `application_2.js` add jquery and animals in there and include that in your view – Niklas May 28 '17 at 21:00

2 Answers2

1

I think your issue might be that you have two files with the same name (but different extensions). Since the Rails asset helpers treat coffescript and js files equally this is ambiguous:

<%= javascript_include_tag 'animals', 'data-turbolinks-track' => true %>

Which file should it load? I'm guessing it takes the first in alphabetical order which would be animals.coffee.

To solve the issue move the sprockets manifest to animals.coffee and remove the animals.js file.

# app/assets/animals.coffee
#= require jquery
#= require jquery_ujs
#= require turbolinks
#= require bootstrap-sprockets
#= require_self
alert 'Hello World'
max
  • 96,212
  • 14
  • 104
  • 165
  • I have tried that one. Only animals.js was included in the generated page and I only contains (function() {$(function() {return alert("sdfsdfsd");});}).call(this); Because jquery wasn't included in the file, compiler complains about '$' variable :( – Hilmi Yamcı May 28 '17 at 20:44
  • Edited. I think its brecause you have two files with the same name. – max May 28 '17 at 20:45
  • I changed the content of animals.coffe like you mentioned. But now It doesn't compile. – Hilmi Yamcı May 28 '17 at 20:59
  • Right sorry. Coffescript uses `#` instead of `//` for comments. Edited – max May 28 '17 at 21:07
  • It also proves my theory that rails was linking to `animals.coffee`. – max May 28 '17 at 21:09
  • :), I wish I had post this question earlier instead of struggle to solve this isssue for 7 hours. Thanks a lot. – Hilmi Yamcı May 28 '17 at 21:13
  • By the way I have another question. If I have //= require_tree . line in my application.js It will inevitably includes the animals.coffe file. How can I exclude this file from being included to animals.js file ? – Hilmi Yamcı May 28 '17 at 21:18
  • Either use one single manifest file - `application.js`. Or don't use `//= require_tree .` and require the files explicitly. `require_tree` is just declarative and does not allow you any fine grained control over what it includes. – max May 28 '17 at 21:28
0

You can remove the animals.coffee file and animals.js can be require in the file of application.js to available your js code in your project.

Md Ariful Islam Arif
  • 1
  • 2