Search code examples
jquerytemplatescakephplazy-loadingdeferred-loading

How to run Javascript in template while all scripts are at the bottom?

I use CakePHP and in the template I pushed every script-tag down right before the closing body tag to get a fast pageload. Now in the body, before the script-tags, there is some code which relies on jQuery (slider and charts). So I used the document.ready-function for that but nothing happens. What Do I have to do to achieve a working script?

Some code for you to get an insight:

The template index.php

... html stuff ...
... the following line fetches the content which contains jQuery functions ...
<?php echo $this->fetch('content'); ?>
... html stuff ...
<?php 
    echo $this->Html->script('jquery'); 
    echo $this->Html->script('jquery-ui-1.9.1');
    echo $this->Html->script('rhinoslider-1.05'); 
    echo $this->fetch('script');
    echo $scripts_for_layout;
    echo $this->Js->writeBuffer(); // Write cached scripts 
?>
</body>

In the fetched content there is for example the slider function:

$(document).ready(function() {
    $('#slideshow').rhinoslider();
});

My approaches: I tried it too with window.onload which doesn´t work either. Due to my understanding of the document.ready- and onload-functions I absolutely don´t have any further clue why it´s not working. I rely on you guys :) Thanks in advance.

Solution

  • Looks like this results in you trying to use $(document).ready() before $ is available. You'll need to make sure that jQuery is loaded before you make any call to $(). Try loading jQuery in the <head>.