Strategy for moving javascript to the bottom in CodeIgniter? Strategy for moving javascript to the bottom in CodeIgniter? codeigniter codeigniter

Strategy for moving javascript to the bottom in CodeIgniter?


You could put the custom JS in a regular variable or nowdoc (php 5.3.0+), and then echo the variable along with script tags in the footer if it exists. Nowdoc might be preferable because you can use both double quotes and single quotes in your JS and PHP won't parse/escape the text.

someview.php:

<?php $custom_js = "alert('custom js ran');";?><?php $custom_js = <<<'CUSTOM_JS'alert("custom js ran (i'm in a nowdoc!)");CUSTOM_JS;?>

footer.php:

<?php if(isset($custom_js)) { ?>    <script><?php echo $custom_js; ?></script><?php } ?>

Edit 2: If you don't want to have the javascript in a string, you could have the javascript in a seperate file and then use PHP's file_get_contents() to load it into the $custom_js variable as a string.

Edit:This is just an aside, but you might look into using the Carabiner library for loading JS and CSS. It's an excellent library. It might not necessarily help with your current problem, but if your global.js is quite large, you could split it up and use Carabiner to compress/concatenate on load. I currently use it to select which JS and CSS gets loaded for logged in and logged out users on my current CI project.


Perhaps I missed something - but why cant you just load another view, which only contains the js code?

Your template:

$this->load->view("header.php");$this->load->view("content.php", $data);$this->load->view("footer.php", $load_js);

Then inside footer.php:

   // start of footer stuff here   $this->load->view($load_js);</body></html>

Then inside page1.php:

<script>   // Your scripts here</script>

OR:

Your template:

$this->load->view("header.php");$this->load->view("content.php", $data);

Then inside each "content.php" file:

 // Content goes here$data['load_js'] = "page1.php";$this->load->view("footer.php", $data);

Then inside single "footer.php" file:

   // start of footer stuff here   $this->load->view($load_js);</body></html>

Then inside page1.php:

<script>   // Your scripts here</script>

The second method is probably more what you want. It does mean you need to call the footer in each content file - but it is literally one line - so your not really repeating yourself - but it gives you complete control inside the content file to specifically any js files to load.

You can expand this an make the $load_js variable an array of js files to load.


I use a set of layouts, which are views that provide the basic structure of the site. Every controller calls a layout and passes into it the content specific for that controller method.

For example, say you have a single layout:

<html>  <head>    <title><?php echo $page->title ?></title>    <?php if (count($page->css)): ?>       <?php for ($i=0; $i < count($page->css); $i++): ?>         <link rel="stylesheet" href="<?php echo $page->css[$i] ?>"/>       <?php endfor; ?>    <?php endif; ?>  </head>  <body>    <?php $this->load->view('header.php'); ?>    <?php $this->load->view($content); ?>            <?php $this->load->view('footer.php'); ?>    <?php if (count($page->js)): ?>      <?php for ($i=0; $i < count($page->js); $i++): ?>        <script src="<?php echo $page->js[$i] ?>"></script>      <?php endfor; ?>    <?php endif; ?>  </body></html>

Each page passes in a $page object that contains an array of css and js files. For files that are global, like global.js, you can just hardcode that in at the bottom (same with global CSS at the top). Or, you can set a parent controller that all controllers inherit from. This way you can set up the $page object with default settings (including adding global.js). Then, each controller/method can remove global.js if it's not needed.

Each page also passes in a $content variable with the location of the main view for the page.

You can extend this even further by having multiple layouts and moving some of the HTML into the layout (e.g. 1 column, 2 column, 3 column layouts). In those cases, you may pass in multiple view locations for each column, etc. It's really up to you.

Of course, to keep all JS at the bottom you'd need to move all your page-specific custom JS into JS files. That's actually the best way to go, considering external JS can be cached.