If you want to use a Javascript file, you usually reference it in the head section of your layout:
<head>
<?php echo $javascript->link('script.js'); ?>
</head>
But sometimes you want to use a certain Javascript file only in one view. Then it doesn’t make sense to reference it in the layout. You could take the PHP statement from above and place it in your view, that will work. But it is not a clean solution as the Javascript reference is placed somewhere in the middle of the generated HTML code.
Fortunately, CakePHP 1.2 allows you to define a reference to a Javascript file which is then added to the head section of the generated HTML code. For this purpose the variable $scripts_for_layout has to be added to the layout:
<head>
<?php echo $scripts_for_layout; ?>
</head>
In the view you can now link to the Javascript file with:
$javascript->link('script.js', false);
That’s it.

FYI, you don’t actually need to include the ‘.js’, since it is added to the file automatically, so you can also do $javascript->link(‘script’);
Another feature that’s new in 1.2 is the ability to specify mutliple scripts in a single link() call, i.e. $javascript->link(array(‘script1′, ‘script2′));
@nate: Thanks for the additional tips :)
Thank you for great tips! :)
perfect :)
This is excellent. A feature that I _sort of_ self-implemented but that I knew could be done better.
now it has been.
Is this version 1.2 only, I’m currently working with 1.1
@Digital Spaghetti: Yes, it is 1.2 only. With 1.1 you have to use something like the HeadHelper, which is available in the snippet section on CakeForge.
[...] time ago I wrote a post titled “Referencing Javascript files” in which I explained how you can reference Javascript [...]
I wrote a small helper for automatically including JS and CSS files, following Cake’s “convention over configuration”. You can check it out at http://jirikupiainen.com/2007/04/11/automatically-loading-js-and-css-files-with-cakephp/ if you’re interested – I’d love to get some feedback.
@jiri: Looks good, but at least for me it is rather seldom that I use controller resp. action specific CSS and JS files.
[...] section of a HTML page from the view. CakePHP 1.2 provides such a functionality for referencing Javascript and CSS files. If you want to add something else to the head section, you have to write your own [...]
Be wary of using js file names with dots in it, e.g. jquery-1.2.2.min.js as this will screw the routing. This results in in a javascript error since cake then tries to find a ‘JsController’ as it doesn’t look in the /app/webroot/js folder any more.
You’ll notice it in form of a js syntax error because instead of the js the default error html page gets included.
Workaround: don’t use dots in your file names.
@ben: Hm, I’m using it to reference the jquery library, too. But I didn’t encounter any problems, it’s working here with the beta version and the latest version from the repository.
Sorry for the confusion – I got distracted by the docblock ‘$url String URL to JavaScript file [...]‘, http://api.cakephp.org/1.2/javascript_8php-source.html#l00138 and tried every possible path syntax (e.g. ‘js/jquery-1.2.2.min.js’) except for the (right) one without leading path info and trailing file extension.
Working syntax: $javascript->link(‘jquery-1.2.2.min’) if your jquery script resides in /app/webroot/js that is.
update: $javascript->link(‘jquery-1.2.2.min.js’) works like a charm too – I don’t know how I even got to write that nonsense comment. Many thanks for checking though and sorry for the bogus error report.
@ben: No problem. I think your comment simply showed that the specific doc block could be improved. So I opened a ticket for it.
[...] use the Javascript files, we have to include them in the layout (or in the view, see “Referencing Javascript files” for more [...]
Hi
Ben, I am not sure if you are as crazy/stupid as you think you are :) I am trying to do the same thing, and it seems that I cannot include a .js file if it has a period in its name. I try navigating to the url localhost:8080/js/rounded_corners.inc.js and it doesn’t work. If I look for hello.js it works fine. The periods are doing something to it! Any idea what is wrong. Or am I crazy too?
Thanks
@Ahmed: How do you reference the .js file and where is the .js file located?
@cakebaker: well regardless of how I reference them, they don’t seem to work at all right now :)
If I have foo.js in app\webroot\js\ and try to access localhost:8080/js/foo.js I get error 403. I am wondering if this is a router problem. or .htaccess…
This is running apache 2.2 on Windows Vista; Everything works fine, and the front page works well (all colors/css showing).
But, when I want to print a script tag I do: link(“bubbles/rounded_corners_inc.js”)) ?>
Thanks
@Ahmed: Hm, it’s a bit strange that you get a 403 error. Does the web server has the permissions to read that file? And is the link to the javascript in the HTML file? But I have to admit I’m a bit in the dark ;-)
I am trying to reference my js file in my head tag by doing the following:
link(‘cities.js’);
endif;
?>
But I get an error saying that the $javascript variable is undefined. Can someone explain where I set this variable with an example?
Thanks
Oops this is the snippet.
if(isset($javascript)):
$javascript->link(‘cities.js’);
endif;
@Bruno: You have to add the Javascript helper to the $helpers array of either your controller or your AppController (app/app_controller.php):
public $helpers = array('Javascript'); or var $helpers = array('Javascript'); // PHP 4Hope that helps!
I am writing the code
echo $javascript->link(‘soft.js’); in the view part, but can not access the file through it, nor can I access the .css files by $html->css(‘css_name’);
on my controller I have
var $helpers = array(‘Html’,'Javascript’);
Any help will be appreciated.
@Amir: Is there an error displayed? And if you look at the generated HTML, does it contain the links (maybe with wrong paths)?
I have the same problem as Amir. New to Cake. Version: CakePHP1.1.19.6305.
Trying to get my head around MVC, and that is great stuff, but current snag is adding AJAX, specifically tiny_mce to the mix.
My resultant page source shows:/cake/js/tiny_mce/tiny_mce.js
It should be /cake/app/webroot/js/tiny_mce/tiny_mce.js
Followed:http://bakery.cakephp.org/articles/view/using-tinymce-with-cakephp
and http://bakery.cakephp.org/articles/view/using-tinymce-with-cakephp-and-ajax
What am I doing wrong?
@CombatWombat: Hm, no idea why you get a wrong path… Personally, I would point the document root to app/webroot, and the problem should go away ;-)
Btw: As you are new to Cake, I would directly start with CakePHP 1.2.
Although I’m linking many .css and .js files using:
$html->css(‘sheet.css’); and $javascript->link(‘script.js’);
when I echo $scripts_for_layout, I get the empty string.
Can anyone help?
The $scripts_for_layout variable is always null.
I’ve linked a few js files via $javascript->link(‘script.js’), but I get nothing. Can anyone help?
Nevermind :D.
I just figured out that I need to specify ‘false’ as the second parameter for the $javascript->link() method. Setting that parameter to false will cause the script you’re trying to link to show up wherever $scripts_for_layout variable is specified.
@pokaru: I’m glad you found the solution in the meantime :)
What about for staticpages in /views/pages/? You can’t add the JavaScript helper, because there isn’t a controller – how can I add javascript files in pages?
Thanks!
@Mr Speaker: Thanks for your comment!
I hope I could answer your question with the following article: http://cakebaker.42dh.com/2009/06/01/specifying-helpers-for-static-pages/
Hey
I need to ad my Google ads to the cakephp default layout…..
If I add the code directly like we add in any html page it doesnt appear…
I also tried both of the tricks shared here but its not working..
Kindly help me and email me at danish.don123@gmail.com
I really need to know please help me out guys…
Regards,
@Danish: Hm, I don’t see why it shouldn’t work if you put the adsense code directly to the layout. Can you paste your code somewhere, for example on http://bin.cakephp.org?
Thanks a lot.
Well done. That was a big help.
@AngryJoe: You are welcome!