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

https://stackoverflow.com/questions/17282898

01-06-2022
|

Pergunta

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.

Solução

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>.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow