Bootstrap modal: is not a function

Question

I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says :

$(...).modal is not a function
         


        

Answer 1

I'm a bit late to the party, however there's an important note:

Your scripts might be in the right order but watch out for any asyncs in your script tag (like this)

<script type="text/javascript" src="js/bootstrap.js" async></script>

This might be causing the issue. Especially if you have this async set only for Production environments this can get really frustrating to reason about.

Answer 2

Changing import statement worked. From

import * as $ from 'jquery';

to:

declare var $ : any;

Answer 3

This warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 4

Causes for TypeError: $(…).modal is not a function:

1. Scripts are loaded in the wrong order.
2. Multiple jQuery instances

Solutions:

1. In case, if a script attempt to access an element that hasn't been reached yet then you will get an error. Bootstrap depends on jQuery, so jQuery must be referenced first. So, you must be called the jquery.min.js and then bootstrap.min.js and further the bootstrap Modal error is actually the result of you not including bootstrap's javascript before calling the modal function. Modal is defined in bootstrap.js and not in jQuery. So the script should be included in this manner

      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
      <script type="text/javascript" src="js/bootstrap.js"></script>
   

2. In case if there are multiple instances of jQuery, the second jQuery declaration prevents bootstrap.js from working correctly. so make use of jQuery.noConflict(); before calling the modal popup

   jQuery.noConflict();
   $('#prizePopup').modal('show');
   

   jQuery event aliases like .load, .unload or .error deprecated since jQuery 1.8.

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });
   

   OR try opening the modal popup directly

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });
   

Answer 5

I meet this error when integrate modal bootstrap in angular.

This is my solution to solve this issue.

I share for whom concern.

First step you need install jquery and bootstrap by npm command.

Second you need add declare var $ : any; in component

And use can use $('#myModal').modal('hide'); on onSave() method

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Answer 6

change the order of the script

Because bootstrap is a jquery plugin so it require Jquery to execute