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

This is my Modal HTML :

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

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

And this is my JavaScript to run it with when a window is loaded :

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

How can I fix this problem?

By defining the JQuery instance twice the problem will arrise. — pragadeesh, May 18 '17 at 05:55

score 217 · Accepted Answer · answered Sep 10 '14 at 05:37

217

You have an issue in scripts order. Load them in this order:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Why this? Because Bootstrap JS depends on jQuery:

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

answered Sep 10 '14 at 05:37

Ionică Bizău

109,027
88
289
474

4

I still have this problem when I try to run the modal using google dev tools. – Coded Container Feb 20 '18 at 16:50
@CodedContainer Make sure `$` is the jQuery function. Most probably it's the `querySelector` function (named `$`) which is exposed by the Google Chrome Dev Tools. – Ionică Bizău Feb 20 '18 at 17:50
1

you deserve a thums up – Abdulkarim Kanaan Sep 10 '20 at 02:28
1

NOTE: bootstrap 5 dropped jQuery, see [this](https://stackoverflow.com/questions/73508864/getting-type-error-modal-is-not-a-function#:~:text=Bootstrap%20V5%20has%20many%20breaking%20changes.%20One%20of%20them%20is%20the%20removal%20of%20jquery) – konchy Jul 20 '23 at 10:40

score 95 · Answer 2 · answered Oct 27 '15 at 12:32

95

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>

answered Oct 27 '15 at 12:32

Nurp

1,409
13
25

thanks for this point ,i met this issue and found that my own DataTable.min.js had imported jquery libraries into it ,but my page import it again ,that's the root issue caused it . – Alter Hu Nov 01 '16 at 07:51
Very good hint, I had jquery npm installed in Aurelia and also manually loaded in index.html. Thanks! – IngoB Mar 19 '17 at 12:56
In a large framework on which Im working, with horrible setup, jQuery's loaded in some pages but in others: after banging my head a couple of times, went here and read @Nurp answer. Saved my day. – Nineoclick Mar 22 '17 at 08:40
The problem is i am using application that has dependencies on older jquery version and i am not allowed to change and it is being imported later at some stage ! i have used latest version of jquery and then bootstrap js , causing all the problems ! – heman123 Aug 31 '17 at 06:04
That was my problem, too. I removed jquery from the scripts section in angular.js and also deleted "import * as $ from 'jquery'" from the Typescript and everything worked. – Jens Mander Sep 19 '18 at 00:17
Era meu problema também ! Obrigado ! – hard123 Sep 17 '19 at 15:44
Essa é uma boa resposta. Foi atolado por isso por algum tempo. – Love Putin Not War Jun 20 '20 at 07:55

Nɪsʜᴀɴᴛʜ ॐ · Answer 3 · 2019-08-09T10:07:44.900

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

Scripts are loaded in the wrong order.
Multiple jQuery instances

Solutions:

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>
```
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 () {
      ...
});
```

I change to grasp the modal directly by `$(".modalClassName")` and it works... — Fatima, Dec 12 '21 at 08:06

score 17 · Answer 4 · answered Sep 10 '14 at 05:37

17

jQuery should be the first:

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

answered Sep 10 '14 at 05:37

dashtinejad

6,193
4
28
44

score 16 · Answer 5 · edited Jun 05 '16 at 01:05

16

The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave 1 instance of jQuery and your code will work.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

edited Jun 05 '16 at 01:05

antonio

10,629
13
68
136

answered Jun 05 '16 at 00:32

Juan Camilo Colmenares Rocha

161
1
3

score 11 · Answer 6 · answered Sep 10 '14 at 06:15

11

change the order of the script

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

answered Sep 10 '14 at 06:15

Vitorino fernandes

15,794
3
20
39

score 11 · Answer 7 · answered Jun 01 '20 at 16:57

11

Use:

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

answered Jun 01 '20 at 16:57

Antonio Moreno

881
8
9

thanks, this worked for me.., I'm importing multiple jquery libs : `ajax.googleapis.com/ajax/libs/jquery/`, and `code.jquery.com/jquery-3.6.0` – Joseph Ali Mar 24 '22 at 13:15

score 6 · Answer 8 · answered Dec 06 '18 at 07:16

6

Changing import statement worked. From

import * as $ from 'jquery';

to:

declare var $ : any;

answered Dec 06 '18 at 07:16

ranjeet8082

2,269
1
18
25

score 6 · Answer 9 · answered Apr 10 '20 at 08:40

Struggled to solve this one, checked the load order and if jQuery was included twice via bundling, but that didn't seem to be the cause.

Finally fixed it by making the following change:

(before):

$('#myModal').modal('hide');

(after):

window.$('#myModal').modal('hide');

Found the answer here: https://github.com/ColorlibHQ/AdminLTE/issues/685

score 5 · Answer 10 · answered Jun 28 '19 at 16:54

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

score 4 · Answer 11 · answered Apr 15 '19 at 11:51

Run

npm i @types/jquery
npm install -D @types/bootstrap

in the project to add the jquery types in your Angular Project. After that include

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

in your app.module.ts

Add

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

in your index.html just before the body closing tag.

And if you are running Angular 2-7 include "jquery" in the types field of tsconfig.app.json file.

This will remove all error of 'modal' and '$' in your Angular project.

score 2 · Answer 12 · answered Feb 26 '19 at 16:50

2

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.

answered Feb 26 '19 at 16:50

Martin Shishkov

2,709
5
27
44

The code in the question clearly shows that (a) they are not in the right order and (b) they are not using the async attribute – Quentin Feb 26 '19 at 16:52
2

I'm giving my answer because it is a frequently googled question and someone might benefit from it – Martin Shishkov Feb 27 '19 at 08:23

score 2 · Answer 13 · answered Jan 30 '21 at 06:52

I added a modal dialog in jsp and tried to open it with javascript in jsx and hit the same error: "...modal is not a function"

In my case, simply by adding the missing import to the jsx solved the problem.

`import "./../bower/bootstrap/js/modal.js"; // or import ".../bootstrap.min.js"`

score 0 · Answer 14 · answered Dec 18 '17 at 06:42

0

The problem happened to me just in production just because I imported jquery with HTTP and not HTTPS (and production is HTTPS)

answered Dec 18 '17 at 06:42

Patrick from NDepend team

13,237
6
61
92

score 0 · Answer 15 · answered Mar 31 '23 at 02:37

0

Add jQuery.noConflict();

<script type="text/javascript">
    $(window).load(function() {
        jQuery.noConflict();
        $('#prizePopup').modal('show');
    });
</script>

answered Mar 31 '23 at 02:37

Arif Maksum

71
1
2

Please expand on your answer, seeing as how `noConflict()` can have adverse effects (it relinquishes jQuery's control of `$`). Please explain why this works, and what caveats it may come with. Also refer to [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – Tijmen Apr 05 '23 at 09:41

Bootstrap modal: is not a function

15 Answers15

Plugin dependencies

Linked