CODEWITHSUNDEEP
angular
mano manoj
mano manoj

Reputation: 245

$.fn.modal is not defined; for bootbox

I have included bootbox with "npm install bootbox --save", also included in angular.json 

"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/bootbox/bootbox.js"
            ]

I have tried to use it in a component

bootbox.confirm("This is the default confirm!", function (result) {
            if (result) {
                this.router.navigateByUrl('login');
            } 
        });

It gives error $.fn.modal is not defined; please double check you have included the Bootstrap JavaScript library. See http://getbootstrap.com/javascript/ for more details.

But it works fine when checked with console apart from UI is not good..

Kindly help

Upvotes: 1

Views: 8138

Answers (3)

Matt Doran
Matt Doran

Reputation: 2153

For me I had to add this dependency to the requirejs config.js file.

If you are not be using requirejs it could still be a dependency issue.

shim: {
    bootstrap: {
        deps: ['jquery']
    },
    bootbox: {
        deps: ['bootstrap']
    } .....

Upvotes: 0

Web Developer
Web Developer

Reputation: 343

I solved this issue by wrapping the JS in this block of code:

$(document).ready(function () {
     bootbox.alert("Hello world!");
});

This ensures that the code begins to run only once the page has fully loaded. This is the best practice in any case, not only when you encounter Bootbox issues.

Upvotes: 1

DragonSpirit
DragonSpirit

Reputation: 61

Removing the node_modules folder inside the bootbox folder helped resolve this same issue for me. After removing, rebuild your bundle. May not work for all cases but it's worth a try.

Upvotes: 0

Related Questions