[javascript] 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="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?

This question is related to javascript jquery html bootstrap-modal

The answer is


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"` 

Changing import statement worked. From

import * as $ from 'jquery';

to:

declare var $ : any;

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>

Use:

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

change the order of the script

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


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>

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


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.


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


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


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

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.


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>

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to bootstrap-modal

Modal width (increase) Bootstrap $('#myModal').modal('show') is not working How to use code to open a modal in Angular 2? Jquery to open Bootstrap v3 modal of remote url How to use Bootstrap modal using the anchor tag for Register? Close Bootstrap modal on form submit Capture close event on Bootstrap Modal Bootstrap modal opening on page load Bootstrap modal: is not a function In Bootstrap open Enlarge image in modal