How to include my .js files after javascript code generated by Datepicker widget in view file.
echo DatePicker::widget([
'name' => 'datepicker--2',
'id' => 'datepicker--2',
'clientOptions' => [
'showOtherMonths' => true,
'maxDate' => '+ 0d',
'showOtherMonths' => true,
'selectOtherMonths' => true,
]
]);
My asset bundle:
namespace app\assets;
use yii\web\AssetBundle;
class ChartsAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $js = [
'js/charts.js',
'js/charts-init.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\jui\JuiAsset',
'yii\web\JqueryAsset',
];
}
What I'm getting on my page source:
...
<script src="/new/js/charts.js"></script>
<script src="/new/js/charts-init.js"></script>
<script type="text/javascript">jQuery(document).ready(function () {
$('#datepicker--2').datepicker($.extend({}, {"showOtherMonths":true,"maxDate":"+ 0d","selectOtherMonths":true,"dateFormat":"M d, yy"}));
});</script></body>
</html>
With yii2, you have options to define the position (HEAD, BEGIN OR END) of the client scripts with in the the document. This can be achieved by doing something like this
public $jsOptions = [
'position' => \yii\web\View::POS_HEAD
];
Or Using This.
Create BaseAssets like this:
namespace app\assets;
class BaseAsset extends AssetBundle
{
public $sourcePath = '#resources'; // #app/resources
public $css = [];
public $js = [];
public $depends = [
'yii\web\YiiAsset',
'yii\jui\JuiAsset',
'yii\web\JqueryAsset',
];
public $jsOptions = [ 'position' => \yii\web\View::POS_HEAD ];
}
And your Assets:
namespace app\assets;
use yii\web\AssetBundle;
class ChartsAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $js = [
'js/charts.js',
'js/charts-init.js',
];
public $depends = [
'app\assets\BaseAssets',
];
public $jsOptions = [ 'position' => \yii\web\View::POS_END ];
}
Related
I'm using the appasset file to add my own custom scripts and styles, but I need to debug on the DEV environment, as here I dont want to use the .min files.
I have tried the example below but thats not going to work, is there a way to switch between files here?
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
// this is not going to work
YII_ENV_DEV ? 'js/site.min.js' : 'js/site.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
https://www.yiiframework.com/doc/guide/2.0/en/structure-assets
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
public function init()
{
parent::init();
$this->js[] = YII_ENV_DEV ? 'js/site.min.js' : 'js/site.js';
}
}
In Yii2 Advanced Application font-awesome .css file add in AppAssets
vendor/font-awesome/css/font-awesome.min.css add in frontend and backend AppAssets
frontend->assets->AppAsset.php
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* Main frontend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/style.css',
];
public $js = [
'js/jquery.min.js',
];
public $depends = [
'yii\web\YiiAsset',
//'yii\bootstrap\BootstrapAsset',
];
}
?>
backend->assets->AppAsset.php
<?php
namespace backend\assets;
use yii\web\AssetBundle;
/**
* Main backend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/style.css',
];
public $js = [
'js/jquery.min.js',
];
public $depends = [
'yii\web\YiiAsset',
//'yii\bootstrap\BootstrapAsset',
];
}
?>
Thank's in Advanced.....
You can create new Asset File and Include it in your Layout
class FontAwesomeAsset extends \yii\web\AssetBundle
{
public $sourcePath = '#vendor/font-awesome/';
public $css = [
'css/font-awesome.min.css',
];
public $depends = [
'yii\web\YiiAsset',
];
}
And then call it in your Layout file (commonly views/layout/main.php)
frontend\assets\FontAwesomeAsset::register($this);
Vendor folder is not web accessible. One solution is to symlink the css, js, img from vendor folder into the web folder. Then include that. Or here is the Yii way to do it:
For example :
<?php
namespace app\assets;
use yii\web\AssetBundle;
class BootstrapAsset extends AssetBundle {
//set the source path using #vendor or another alias like #bower here
public $sourcePath = '#bower/bootstrap/dist';
//include css and js relative to the source path set above
public $css = [
'css/bootstrap.css',
];
public $js = [
'js/bootstrap.min.js',
];
}
Or Else try this
public $sourcePath = '#vendor';
public $css = [
'font-awesome/css/font-awesome.min.css',
first of all create new asset file [vendorName]Asset with code:
namespace frontend\assets;
use yii\web\AssetBundle;
class [vendorName]Asset extends AssetBundle
{
/**
* #inheritdoc
*/
public $sourcePath = '#vendor/path/to/you/vendor/folder';
/**
* #inheritdoc
*/
public $js = [
];
public $css = [
'css/youFile.css',
];
public $depends = [
];
}
Next is add this file to main asset $depends:
public $depends = [
..
'frontend\assets\[vendorName]Asset',
..
];
And thats all
I want use dynamic form widget (Demo 2:file upload)
URL:http://wbraganca.com/yii2extensions/dynamicform-demo2/source-code
Every thing is good but when i prees 'minus' button or 'new' button i recieve this error from ActiveForm.js:
TypeError: $(...).data(...) is undefined
methods.find()
$.fn.yiiActiveForm()
_fixFormValidaton/<()
.each()
jQuery.prototype.each()
_fixFormValidaton()
_addItem()
methods.addItem()
$.fn.yiiDynamicForm()
what is the problem?
what's the problem?
my AppAsset :
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
'css/tabs.css',
'css/tabstyles.css',
];
public $js = [
'js/cbpFWTabs.js',
'js/cbpHorizontalMenu.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
I want to load my jquery files on header, my all of jquery files loading via Yii2 assets. Any body knows?
In AppAsset file add:
public $depends = [
'yii\web\JqueryAsset'
];
Add that line to AppAsset file,
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\web\jQueryAsset' //I means this line
];
}
I want create this result:
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
I have this AppAsset Bundle
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web/frontend/assets';
public $css = [
'css/site.css',
];
public $js = [
'functions.js',
'jquery.placeholder.min.js',
'line-chart.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
I want that only jquery.placeholder.min.js have these jsOption, I tried adding jsOptions propertie without success.
public $jsOptions = [
['condition' => 'IE 9']
];
There are a way to get this working? Or maybe I have to create a new Bundle only for these file?
I dont see more info about this in the official doc: http://www.yiiframework.com/doc-2.0/guide-structure-assets.html
remove your js from base bundle
public $js = [
'functions.js',
//'jquery.placeholder.min.js',
'line-chart.js',
]
Add a bundle in your depends
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yourapp\assets\myAsset',
];
create your asset
<?php
namespace yourapp\assets;
use yii\web\AssetBundle;
class myAsset extends AssetBundle
{
public $js = [
'jquery.placeholder.min.js',
];
public $jsOptions = ['condition' => 'IE 9'];
}