Referencing Javascript files
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!