Include CSS,javascript file in Yii Framework
Solution 1
Something like this:
<?php
$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
Solution 2
You can do so by adding
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');
Solution 3
I liked to answer this question.
Their are many places where we have css & javascript files, like in css folder which is outside the protected folder, css & js files of extension & widgets which we need to include externally sometime when use ajax a lot, js & css files of core framework which also we need to include externally sometime. So their are some ways to do this.
Include core js files of framework like jquery.js, jquery.ui.js
<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?>
Include files from css folder outside of protected folder.
<?php
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?>
Include css & js files from extension or widgets.
Here fancybox is an extension which is placed under protected folder. Files we including has path : /protected/extensions/fancybox/assets/
<?php
// 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');
?>
Also we can include core framework files: Example : I am including CListView js file.
<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);
?>
- We need to include js files of zii widgets or extension externally sometimes when we use them in rendered view which are received from ajax call, because loading each time new ajax file create conflict in calling js functions.
For more detail Look at my blog article
Solution 4
Easy in your conf/main.php. This is my example with bootstrap. You can see that here
'components'=>array(
'clientScript' => array(
'scriptMap' => array(
'jquery.js'=>false, //disable default implementation of jquery
'jquery.min.js'=>false, //desable any others default implementation
'core.css'=>false, //disable
'styles.css'=>false, //disable
'pager.css'=>false, //disable
'default.css'=>false, //disable
),
'packages'=>array(
'jquery'=>array( // set the new jquery
'baseUrl'=>'bootstrap/',
'js'=>array('js/jquery-1.7.2.min.js'),
),
'bootstrap'=>array( //set others js libraries
'baseUrl'=>'bootstrap/',
'js'=>array('js/bootstrap.min.js'),
'css'=>array( // and css
'css/bootstrap.min.css',
'css/custom.css',
'css/bootstrap-responsive.min.css',
),
'depends'=>array('jquery'), // cause load jquery before load this.
),
),
),
),
Solution 5
In the view, add the following:
<?php
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
$cs->registerCssFile('/css/yourcss.css');
?>
Please notice the second parameter when you register the js file, it's the position of your script, when you set it CClientScript::POS_END, you let the HTML renders before the javascript is loaded.
Related videos on Youtube
Comments
-
viji over 3 years
How to include a Javascript or CSS file in Yii Framework?
I want to create a page on my site that has a little Javascript application running, so I want to include
.js
and.css
files in a specific view. -
Novica89 over 10 yearsSo how would you then "call" the javascript where you need it to be implemented ?
-
Knito Auron over 10 yearsyou can use this way: Yii::app()->clientScript->registerCoreScript('bootstrap');
-
Samuel Liew about 10 years@Christian this is not a forum, and you are encouraged to add on to questions if you are contributing new AND useful information.
-
Compaq LE2202x over 9 years@Truongnq If I place this block
$baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css');
in the Controller, where do I assign$cs
after? Moreover, in myactionView
in my Controller I have this line$this -> render('view', array('model' => $this -> loadModel($id), ));
, should I place it here? -
chapskev over 8 yearsam stuck on the best approach when using partial render. Am having my JS Files conflicting. Which is the best approach for this
-
Developer about 6 yearsNice Solution. i will try it in my Application