Adding page-specific Javascript to each view in CakePHP

Question

In an attempt to keep my scripts maintainable, I\'m going to move each into their own file, organised by controller and action:

// scripts which only apply t         


        

Answer 1

I just had to do page specific inclusion, but I've found a neater way to do it in the documentation. You can just load it into some script block in your default.ctp. And in corresponding view just use HTML helper to push a script:

You can append the script tag to a specific block using the block option:

echo $this->Html->script('wysiwyg', array('block' => 'scriptBottom'));

Which appends <script type="text/javascript" href="/js/wysiwyg.js"></script> to a block.

In your layout you can output all the script tags added to ‘scriptBottom’:

echo $this->fetch('scriptBottom');

Answer 2

With Cake v3 you can do it like this. Add the scripts you want in the specific controller.

//YourController.php
public function beforeRender (Event $event)
{
    array_push($this->scripts, 'Admin/gallery');
    parent::beforeRender($event);
}

Set the default in intialize and render once //AppController.php public function initialize() { parent::initialize();

    $this->scripts = [];
}

public function beforeRender (Event $event)
{
    /* Define scripts in beforeRender of Child */
    $this->set('scripts', $this->scripts);
    /*-----------------------------------------*/
}

Now you can run this function once.

<?= $this->Html->script($scripts) ?>

Answer 3

There's a nuts and bolts of CakePHP blog post on Convention over Configuration – what's the big deal? - which uses a helper for specifying Javascript files:

<?php

class JsManagerHelper extends AppHelper {

    var $helpers = array('Javascript');

    //where's our jQuery path relevant to CakePHP's JS dir?
    var $_jqueryPath = 'jquery';

    //where do we keep our page/view relevant scripts?
    var $_pageScriptPath = 'page_specific';

    function myJs() {
    return $this->Javascript->link($this->_jqueryPath . '/' .
                                    $this->_pageScriptPath .'/' .
                                    $this->params['controller'] . '_' .
                                    $this->params['action'], false);
    }

}

?>

And then you just have $jsManager->myJs(); in your view.

Answer 4

LI worked a little (very little) bit over W1ckd snippet and made it easier for sharing the same js for different actions:

if ( is_dir(WWW_ROOT . 'js' . DS . $this->params['controller'] ) && ( $handle = opendir( WWW_ROOT . 'js' . DS . $this->params['controller'] ) ) )
{
    while ( false !== ( $entry = readdir( $handle ) ) )
    {
        if ( in_array( $this->params['action'], explode( '.', $entry ) ) ) {
            $entry = str_replace( ".js", "", $entry );
            echo $this->Html->script( $this->params['controller'].DS.$entry );
        }

    }
    closedir( $handle );
}

This way you can have something like:

webroot/js/controller/view.edit.add.js

And this js will be included in those three actions (view, edit, add).

Answer 5

I have authored a Plugin for this exact issue.

If you have two files:

• /app/View/Post/add.ctp
• /app/View/Post/add.js

it will include the add.js into the script block of the page.

OR

• app/View/Post/add.js
• app/webroot/js/post/add.js

it will include /js/post/add.js into the script block of the page.

A few cute features are in there and it's simple as beans. You can even use PHP inside your .js files and use viewVars which you set in the action. Most of all, you don't need to hack the view or layout files to make it work, simply fetch the 'script' block in the layout. You can also simply write the .js to another view block.

You can check it out here: https://github.com/dizyart/cakephp-viewautoload

It's in the early stages, so make sure to comment and wishlist!

Answer 6

Like deceze is saying, we do it using the layout, although I find our solution a bit more elegant :)

In default.ctp:

if(isset($cssIncludes)){
    foreach($cssIncludes as $css){
        echo $html->css($css);
    }
}

if(isset($jsIncludes)){
    foreach($jsIncludes as $js){
        echo $javascript->link($js);
    }
}

Then, in our controller actions, we define these arrays:

$this->set('cssIncludes',array('special')); // this will link to /css/special.css
$this->set('jsIncludes',array('jquery'));   // this will link to /js/jquery.js

For files that need to be loaded in each view, we simply add the same type of link "statically" to the top of the layout, like:

echo $javascript->link('global');
echo $html->css('global');

This works really well for us. Good luck!