Yii2 include assets after code generated by widget

Question

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>

Is there any reason that you want your scripts to be loaded after the `jQuery(document).ready()` code generated by the `DatePicker`? The code in there only gets executed after the DOM has loaded anyway, including the script tags that load your js files. — deacs, Feb 18 '15 at 18:03
^ what he asked, what problem are you trying to solve by doing this? — Mihai P., Feb 19 '15 at 00:49
@deacs charts-init.js contains jQuery(document).ready() too and need to access initiated datepicker. — user1561346, Feb 19 '15 at 12:06
When you register your js file. Define the depends $this->registerJsFile(Yii::$app->homeUrl .'test.js', [ 'depends' => [yii\web\JqueryAsset::className()], 'position' => \yii\web\View::POS_END ]); dependent on your datepicker assets class like i did for jqueryAssets — Kshitiz, Feb 21 '15 at 08:32

score 4 · Answer 1 · answered Jan 23 '15 at 01:55

4

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.

answered Jan 23 '15 at 01:55

tnchalise

1,573
2
18
38

What should I do in my case? How can I put widget scripts between my scripts? – user1561346 Jan 26 '15 at 09:56

score 2 · Answer 2 · edited Feb 19 '15 at 23:11

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 ];
}

Yii2 include assets after code generated by widget

2 Answers2