YII2 call jquery-ui code before bootstrap.js

Question

Here is my asset code..

public $js = [
    'js/jquery-ui.min.js',
    'js/app.min.js',

];

I have some widgets used in the view file... and here are the order of the js files. What I want is to call the jquery-ui.js before bootstrap.js.. How to do that??

Answer 1

Placing jQuery UI after Bootstrap doesn't make any sense since they are not dependent on each other at all. But for including bundle before another, you should add dependency to the related bundle.

For custom asset bundle you can just write this:

$depends = [
    // Write classes of dependent asset bundles here, for example:
    'yii\jui\JuiAsset',
];

But because Bootstrap is built-in asset, you can not modify it that way. Instead you can set it globally through config of Asset Manager:

return [
    // ...
    'components' => [
        'assetManager' => [
            'bundles' => [
                'yii\bootstrap\BootstrapAsset' => [
                    'depends' => [                  
                        'yii\jui\JuiAsset',
                    ];
                ],
            ],
        ],
    ],
];

Or just set dependency in one specific place before rendering view:

Yii::$app->assetManager->bundles['yii\bootstrap\BootstrapAsset'] = [
    'depends' => [                  
        'yii\jui\JuiAsset',
    ];
],

Official docs:

• Customizing built-in asset bundles
• Asset Manager
• yii\web\AssetBundle $depends