CODEWITHSUNDEEP
javascriptcssyii2
David TG
David TG

Reputation: 77

Javascripts on <head> and at the end of <body>

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],

Upvotes: 0

Views: 184

Answers (2)

ScaisEdge
ScaisEdge

Reputation: 133370

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,],

}  

?>

Upvotes: 1

chapskev
chapskev

Reputation: 982

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

Upvotes: 0

Related Questions