Its very important to learn how to include js & css files while working with Yii. It does not make any kind of problem because yii automatically loads js & css files whenever it uses any core widget, but it makes when we use ajax in our application. So we should know all the ways we can have to load js & css files. With yii including js & css files know as registering js & css files in Yii.
Why we need to register js files externally while we yii automatically register them when we use any widget.
- When we need to write js code and we are not using any yii widget.
- When we are loading any yii widget with ajax request and we need to call this multiple time then what happens, ajax call each time load the js file or jquery file, which slows down your application.
- When we are using renderPartial for the response of ajax request, such calls are made multiple times on the same webpage and renderPartial is using any widget or extension which needs to load js files than some times this creates conflicts in js functions.
This all the tricks some one will need when he/she wants to register js & css files externally in their application.
Yii framework has a class CClienScript which is used to register js & css files. And Yii uses clientScript alias for this. Yii provides alias to its core scripts may be php class, js file etc.
Register core js files of framework like jquery.js, jquery.ui.js:
CClientScript class has a method registerCoreScript to register it core script which are incuded in yii packages like jquery.js etc. Code Example show below.
|
1 2 3 4 5 6 7 |
<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?> |
Register js & css files from css directory under the project directory:
CClientScript has two methods registerCssFile & registerScriptFile which are used to register css & js files. Code Example:
|
1 2 3 4 5 6 7 |
<?php
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?> |
Yii has a lot of extensions with great functionality. We uses them, they had built in functionality to register js & css files but some times with the ajax based application or ajax call we need to register this files externally because multiple ajax calls creates some problem.
Yii provides an asset manager which has functionality to do this. Because with functions registerCssFile & registerScriptFile we are unable to register content under the protected folder and extensions are placed under /project/protected/extensions directory.
Here is an example of fancybox extension.
|
1 2 3 4 5 6 7 8 9 |
<?php
// fancybox assets path:: /protected/extensions/fancybox/assets/
// Fancybox stuff.
$assetUrl = Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('ext.fancybox.assets'));
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.fancybox-1.3.4.pack.js');
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.mousewheel-3.0.4.pack.js');
?> |
Some times we need to register core scripts externally of some widgets like CGridView because of ajax calls we are having some problems.
|
1 2 3 4 5 6 |
<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);
?> |
Pingback: Yii | Pearltrees