We should do that in some cases:
- Write client script without using any widgets or built-in components of Yii
- Using ajax calling: some time we return the result in html type by using renderPartial() method. It's will return all clientscript that is written in that view, without register clientscript it will render every time we return the view
- 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.
Register core script
Yii have built-in client script packages which locate in yii/framework/web/js/source folder. The list of all supporting client script is listed in yii/framework/web/js/packages.php file. You can take a look at that file to see how to see the name of them. For example, I register 'jquery' as a core script like the followingsYii::app()->clientScript->registerCoreScript('jquery');Yii will render jquery into /assets folder. Here is the result:
<script type="text/javascript" src="/assets/3869f222/jquery.js"></script>
Register a javascript file
For register a javascript file in Yii. We use registerScriptFile method which path of file as parameter.Yii::app()->clientScript->registerScriptFile( Yii::app()->theme->baseUrl.'/assets/js/default.js', CClientScript::POS_END);
You can also specific the position of include tag in script by using CClientScript:POS_* ( with * is the specific position).
- At the bottom of html page (before tag)
Yii::app()->clientScript->registerScriptFile( Yii::app()->theme->baseUrl.'/assets/js/default.js', CClientScript::POS_END);result:
<script type="text/javascript" src="/themes/summer/assets/js/default.js"></script>-At the begin of page (right after body tag)
Yii::app()->clientScript->registerScriptFile( Yii::app()->theme->baseUrl.'/assets/plugin/bootstrap/js/bootstrap.min.js', CClientScript::POS_BEGIN);
- In the header of page :
Yii::app()->clientScript->registerScriptFile( Yii::app()->theme->baseUrl.'/assets/plugin/jquery/datetime-ja.js', CClientScript::POS_HEAD);result:
<script type="text/javascript" src="/themes/summer/assets/plugin/jquery/datetime-ja.js"></script>You also use POS_LOAD and POS_READY option, to include script when page loading or when all DOM is ready.
Register css file
To register a css file in Yii, you just have to use registerCssFile method of clientScript class like the followings.Yii::app()->clientScript->registerCssFile( Yii::app()->theme->baseUrl.'/assets/css/style.css' );As the above, we specific the path of css file as a parameter of registerCssFile method. That style.css is in /assets/css of theme folder of yii application. And the result (summer is name of current theme of app):
<link rel="stylesheet" type="text/css" href="/themes/summer/assets/css/style.css" />We can also specific css file for media type. See more media type at: reference
For example, I include print.css file for print media type :
Yii::app()->clientScript->registerCssFile( Yii::app()->theme->baseUrl.'/assets/css/print.css', 'print' );and here is the result:
<link rel="stylesheet" type="text/css" href="/themes/summer/assets/css/style.css" media="print" />