Rails: Calling a Javascript function at the end of the page

Question

I have a js file in my assets/javascripts/ directory. This file is being picked up by rails correctly ( I can see it in firebug when I check the page's head tag)

And I'm calling a function from this js file in my application.js as follows:

//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

$(window).load(function(){
    Boxlayout.init();
});

I read on SO somewhere that the init() functions must be called with .load function so that they are called after the DOM is loaded.

But here the javascript is not working.

On the contrary when I explicitly include the js file with:

<%= javascript_include_tag "file.js" %>

at the bottom of the page and call the same init function from application.js the javascript works fine.

I don't want to explicitly include the file. ( want to do it the rails way). So how do I do it with the first method?

EDIT

Using Rails 3.2.14 (No Turbolinks).

Also the Javascript is not working on Heroku though it works fine locally.

As an aside, .load(…) was deprecated in jQuery 1.8; you should be using .on("load", …). — Rory O'Kane
– Rory O'Kane, Commented Sep 17, 2013 at 14:09
Are you using turbolinks? If so, $(window).load will not be called. Turbolinks replace the body of the page, which is why your script is run when you embed it in the body. — superluminary
– superluminary, Commented Sep 17, 2013 at 14:12
@superluminary Nope. I'm using Rails 3.2.14 and no turbolinks. — mrudult
– mrudult, Commented Sep 17, 2013 at 14:14

Arjan · Accepted Answer · 2013-09-17 14:08:41Z

1

Try changing

$(window).load(function(){

into

$(document).ready(function(){

answered Sep 17, 2013 at 14:08

Arjan

6,2742 gold badges30 silver badges42 bronze badges

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

3 Comments

Rory O'Kane Over a year ago

Note that this means something different. load would wait until all images and CSS finish downloading, while ready runs as soon as the HTML has been downloaded and the DOM has been loaded into memory.

mrudult Over a year ago

That still doesn't work when I remove the <%= include_tag %> for the js file

mrudult Over a year ago

@RoryO'Kane I want to use the .load function. want to exceute the js after all css has been loaded.

Dima Shevtchuk · Accepted Answer · 2013-09-17 14:10:13Z

0

You have //= require_tree . in application.js Just will try create new file *.js in assets/javascripts/ directory, and append your code there.

answered Sep 17, 2013 at 14:10

Dima Shevtchuk

557 bronze badges

1 Comment

mrudult Over a year ago

So what? I know that.

superluminary · Accepted Answer · 2013-09-17 14:16:45Z

0

I think this is a turbolinks issue.

Turbolinks swap out the body of the page via AJAX when you click a link but leave the head intact. Because the CSS and JavaScript are only downloaded and parsed at the start of a browsing session you get a significant speed boost.

The downside is that your jQuery load events will not be triggered. This explains why your script is executing when you embed it in the body of the page, but not when it is correctly placed in the head.

Try including the jQuery turbolinks gem. This will trigger the expected jQuery events when a turbolink is activated.

https://github.com/kossnocorp/jquery.turbolinks

answered Sep 17, 2013 at 14:16

superluminary

49.6k26 gold badges154 silver badges152 bronze badges

1 Comment

mrudult Over a year ago

I'm not using Turbolinks.

Collectives™ on Stack Overflow

Rails: Calling a Javascript function at the end of the page

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related