Question

[Solved] Bootstrap modal: is not a function

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="https://www.py4u.net/discuss/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?

Solution #1:

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="https://www.py4u.net/discuss/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).

Solution #2:

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="https://www.py4u.net/discuss/js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Respondent: Nurp

Solution #3:

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>

Solution #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="https://www.py4u.net/discuss/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 () {
          ...
    });
    

Solution #5:

jQuery should be the first:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://www.py4u.net/discuss/js/bootstrap.js"></script>
Respondent: dashtinejad

Solution #6:

change the order of the script

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

Solution #7:

Changing import statement worked. From

import * as $ from 'jquery';

to:

declare var $ : any;
Respondent: ranjeet8082

Solution #8:

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.

Respondent: cyperpunk

Solution #9:

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

Respondent: Hien Nguyen

Solution #10:

Use:

jQuery.noConflict();
$('#prizePopup').modal('toggle');
Respondent: Antonio Moreno

Solution #11:

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

Respondent: WeekendHacker

Solution #12:

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="https://www.py4u.net/discuss/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.

Respondent: Martin Shishkov

Solution #13:

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

Solution #14:

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"` 
Respondent: user1723453

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy