yii2: How to integrate AdminBSB Theme

Question

I'm using yii2 advanced framework. And I am using AdminBSB theme for my layout. But this error appears. I tried on searching for same issues. But I can't figure it out. Here is the error when I inspect:

Uncaught TypeError: jQuery(...).yiiActiveForm is not a function at HTMLDocument.

Some say I declare JS twice. But I didn't declare it twice or I didn't notice It call twice because of my template.

Below is how I am loading the javascript in my Asset Manager file.

public $js = [
    "plugins/jquery/jquery.min.js",
    "plugins/bootstrap/js/bootstrap.js",
    "plugins/bootstrap-select/js/bootstrap-select.js",
    "plugins/jquery-slimscroll/jquery.slimscroll.js",
    "plugins/node-waves/waves.js",
    "plugins/flot-charts/jquery.flot.js",
    "plugins/jquery-sparkline/jquery.sparkline.js",
    "js/admin.js"
];

Answer 1

i had the same theme and i also faced this error and that is because the yiiActiveForm is loaded before the jquery file does, even if you will fix that it will get in conflict with bootstrap js file that functions for the dropdown in the dashboard under user image. I advise you to change the loading of jquery and bootstrap to the following, you need to make some changes to you AppAsset.php file.

1.Remove the bootstrap and jquery links from the $js and $css arrays in the AppAsset.php .

2.Update your $depends array to the following.

 public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];

3.Then update your frontend/config/main.php to the following.

'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'sourcePath' => null, 'js' => ['//code.jquery.com/jquery-2.2.4.min.js'],
                ],
                'yii\bootstrap\BootstrapAsset' => [
                    'sourcePath' => null, 'css' => ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'],
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'sourcePath' => null, 'js' => ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'],
                ],
            ],
        ],