JavaScript inserted after the footer in SilverStripe

Asked 23/8, 2015 at 16:10 Answered 24/8, 2015 at 10:20

javascript silverstripe phaser-framework

Why does my JavaScript appear after the footer? Below is my code in the layout (Page.ss):

<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
    <article>
    <h1>$Title</h1>
        <div class="content">
            <script type="text/javascript">
                window.onload = function() {
                    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
                    function preload() {
                        game.load.image('logo', 'phaser.png');
                    }
                    function create() {
                        var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
                        logo.anchor.setTo(0.5, 0.5);
                    }
                };
            </script>
        </div>
    </article>
    $Form
    $CommentsForm
</div>

Bobodioulasso answered 23/8, 2015 at 16:10 Comment(0)

By default, SilverStripe includes all JavaScript files at the bottom of the page body. This is to allow all other site resources to load before any JavaScript is loaded.

If you have a script tag in a layout or include template it will move the script to the bottom of the body tag.

If you don't want the script tag to be moved you can set Requirements.write_js_to_body to false in your Page_Controller init() function:

class Page_Controller extends ContentController {

    public function init() {
        parent::init();

        Requirements::set_write_js_to_body(false);
    }

}

Note, this will move all your requirements included JavaScript files to the <head> tag.

Hage answered 23/8, 2015 at 22:24 Comment(6)

I added Requirements::set_write_js_to_body(false); in _config.php the output of my javascript still appears at the bottom of the page? thanks. – Bobodioulasso 24/8, 2015 at 0:25

I've given this a test and it works for me. In your config can you put die('Hello'); to test that that line is getting called? – Hage 24/8, 2015 at 1:15

It appears that Requirements::set_write_js_to_body(false) is being called. But Javascript output still at the bottom? – Bobodioulasso 24/8, 2015 at 1:54

Try it in your Page.php file, in the public function init() section under the class Page_Controller – Witt 24/8, 2015 at 6:15

@Witt - Thanks for the feedback. I've edited my answer based on your suggestion. – Hage 24/8, 2015 at 21:51

I tried putting Requirements::set_write_js_to_body(false); into function init. But the js still appears in the bottom. – Bobodioulasso 26/8, 2015 at 11:24

Another option if you want even more control is to use this: https://gist.github.com/markguinn/683ab8b22891632be6e5

Then add the following to Page_Controller::init or mysite/_config.php:

Requirements::set_backend(new BetterRequirementsBackend());

And add:

<!-- INSERT JS HERE -->

and

<!-- INSERT CSS HERE -->

to your template. This way you can control exactly where the injections happen. Note that you'll probably want to change line 23 to = false in the class above or override it in yaml config.

Tachymetry answered 24/8, 2015 at 10:20 Comment(0)

Recommended topics

Hot tags