Rails app JavaScript not working when placed in application.js

Question

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

max · Accepted Answer · 2017-04-18 08:05:28Z

1

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

edited Apr 18, 2017 at 8:05

answered Apr 18, 2017 at 6:23

max

103k15 gold badges113 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rails app JavaScript not working when placed in application.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related