Javascripts on and at the end of

Question

Im using Yii2 and created an asset bundle with my css and javascript files. Im integrating an existing template and some of the javascripts are called on HEAD and other at the end of BODY. I know that there's the public $jsOptions to declare if you want them on head or at end of body. But there's a way to include some on head and some on body? Here's my lists, I need first 4 on head and last 2 on body.

public $js = [
        'js/jquery.min.js',
        'js/bootstrap.min.js',
        'js/custom.js',
        'js/moment/moment.min.js',
        'js/datepicker/daterangepicker.js',
        'js/custom2.js'
    ];

I removed bootstrap and jquery by suggestion of @chapskev and I went here, and try to implement the 3rd option: http://www.yiiframework.com/doc-2.0/yii-web-assetbundle.html#$js-detail

public $js = [
        'js/custom.js',
        ['js/moment/moment.min.js' => ['position' => View::POS_END]],
        ['js/datepicker/daterangepicker.js' => ['position' => View::POS_END]],
        ['js/custom2.js' => ['position' => View::POS_END]],
    ];
    public $jsOptions = ['position' => View::POS_HEAD];

But I'm getting this error: strncmp() expects parameter 1 to be string, array given so obviously I'm not doing it well So I tried this, that is not giving error, but is not including the file at all:

'js/custom2.js' => ['position' => \yii\web\View::POS_END],

It's a good practice to load JavaScript files at end of page. Check this [answer](http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup) out. — Henri Cavalcante, Mar 21 '16 at 17:52
If the order is correct it shouldn't make any difference if you load all of them at the end, unless you have ` — maraca, Mar 21 '16 at 17:53
@maraca There are a few other edge-cases where a script in the head might be preferable or necessary. — Alexander O'Mara, Mar 21 '16 at 17:55
@AlexanderO'Mara yes right. Redirection seems to be another obvious one. But I can't think of many more. — maraca, Mar 21 '16 at 17:58

ScaisEdge · Accepted Answer · 2016-03-21T18:51:19.553

You can use two asset this way In your AppAsset you declare the two dependes

<?php

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',

    ];
    public $js = [
        'js/jquery.min.js',
        'js/bootstrap.min.js',
        'js/custom.js',
        'js/moment/moment.min.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'frontend\assets\HeaderAsset',
        'frontend\assets\BodyAsset',                   
    ];
}

?>

Then you create the HeaderAsset.php

<?php

namespace frontend\assets;

use yii\web\AssetBundle;
use yii\web\View;

class HeaderAsset extends AssetBundle
{
    // The files are not web directory accessible, therefore we need
    // to specify the sourcePath property. Notice the @vendor alias used.
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $js = [
        'js/jquery.min.js',
        'js/bootstrap.min.js',
        'js/custom.js',
        'js/moment/moment.min.js',
    ];    
    public $jsOptions  = ['position'=> View::POS_HEAD,],
}          

?>

And the BodyAsset.php

<?php

namespace frontend\assets;

use yii\web\AssetBundle;
use yii\web\View;

class BodyAsset extends AssetBundle
{
    // The files are not web directory accessible, therefore we need
    // to specify the sourcePath property. Notice the @vendor alias used.
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $js = [
        'js/datepicker/daterangepicker.js',
        'js/custom2.js'
    ];    
    public $jsOptions  = ['position' => View::POS_END,],

}  

?>

score 0 · Answer 2 · answered Mar 21 '16 at 18:00

0

First i think you will have conflicting Jquery cause alreay Yii2 comes bundled with Jquery and bootstrap.

You should remove the Jquery and bootstrap Js unless you have override them on config.

public $js = [
        'js/custom.js',
        'js/moment/moment.min.js',
        'js/datepicker/daterangepicker.js',
        'js/custom2.js'
    ];

answered Mar 21 '16 at 18:00

chapskev

972
9
27

Thanks! I removed them! – David TG Mar 21 '16 at 18:06
@DavidTG did this sort your issue – chapskev Mar 22 '16 at 17:57

Javascripts on and at the end of

2 Answers2