Reputation: 2998
I have a Rails app. The JavaScript works perfectly when it is included in the index.html.erb view in a script tag. The JavaScript doesn't work at all when I place it in my application.js file.
Here is my entire application.js file. This code does not work:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
This exact same code works perfectly when included in a script tag in the actual view:
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>
Can someone help me figure out why this is happening? Thanks
Upvotes: 1
Views: 775
Reputation: 102443
Your code is not being run because its not being included in the compiled application.js
. You can verify this by looking at the source of the javascript file in the browser.
You need to add require_self
to the sprockets manifest which injects the contents of the file itself:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_self
//= require_tree .
You only need to do this for your main "manifest" file as files required by require_tree .
are of course included.
See:
- The Assets Pipeline - 2.4 Manifest Files and Directives
Upvotes: 1