My Apps JavaScript order as below caused an error in bootstrap-popover-x.js $.fn.modal is undefined. I think the <script src="/ehadir2/web/assets/eba97929/js/bootstrap.bundle.js"></script> should be before <script src="/ehadir2/web/assets/d5bde5cc/js/bootstrap-popover-x.js"></script>. How can I reorder the script include ? TQ
The includes come from a number of places including explicitly including assets (like AppAsset) in your view or layout, implicitly included assets (e.g. if you include DatePicker, it will include JuiAsset) as well as things you include into the view or layout explicitly as script tags (don’t do that!).
If the ordering is wrong, it is likely that one of the assets is missing a “depends” entry. For example, if you have created a bootstrapPopoverAsset, you need to specify that it depends on the BootstrapAsset and that will make sure they get included in the correct order. The code is clever enough that if you include an asset more than once, it will not generate extra script tags.
You should be able to find the file that includes the bootstrap-popover and work backwards from that.
All your ehadir2 scripts are linked to the web/assets folder
These are temporary directories that are randomly generated and stored as cache on render.
I would recommend you place your scripts in
ehadir2/web/js (you will need to create the js folder)
Then add them to
ehadir2/assets/AppAssets.php
In this you see that they depend on other assist (jQuery)
You don’t need to include /web since it sets baseUrl to @web (an alias for /web)
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
];
public $js = [
'js/main.js',
'js/active-vote.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset',
'yii\bootstrap4\BootstrapPluginAsset',
// I’m using bootstrap4, default is bootstrap (Bootstrap 3)
];
}
This will then be included on every page
You can call the script functions in a view like this
$this->registerJs('showContent()');
If you need a script only rendered on one view you can include it like this.
$this->registerJsFile('@web/js/my-custom.js');
//like this if they depend on query
$this->registerJsFile('@web/js/my-custom.js' , ['depends' => 'yii\web\JqueryAsset']);
// using POS
$this->registerJsFile('@web/js/my-custom.js' , ['position' => \yii\web\View::POS_END]);
Thanks for your responses. It gave me idea how to solve the problem. There is a variable named bsDependencyEnabled need to be set to true as stated in the kartik-v/yii2-popover-x at https://demos.krajee.com/popover-x .
