Bootstrap modal: is not a function
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="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="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Solution 3
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 popupjQuery.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 4
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 5
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>
godheaper
Updated on January 30, 2021Comments
-
godheaper over 3 years
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"> × </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?
-
yugi almost 10 yearswrite your modal trigger code in window ready function
-
khaled_webdev about 8 years" $(window).load(function() { " saved me
-
pragadeesh about 7 yearsBy defining the JQuery instance twice the problem will arrise. <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
-
-
Alter Hu over 7 yearsthanks 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 .
-
IngoB over 7 yearsVery good hint, I had jquery npm installed in Aurelia and also manually loaded in index.html. Thanks!
-
Nineoclick over 7 yearsIn 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.
-
heman123 almost 7 yearsThe 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 !
-
Coded Container over 6 yearsI still have this problem when I try to run the modal using google dev tools.
-
Ionică Bizău over 6 years@CodedContainer Make sure
$
is the jQuery function. Most probably it's thequerySelector
function (named$
) which is exposed by the Google Chrome Dev Tools. -
Jens Mander almost 6 yearsThat 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.
-
Quentin over 5 yearsThe code in the question clearly shows that (a) they are not in the right order and (b) they are not using the async attribute
-
Martin Shishkov over 5 yearsI'm giving my answer because it is a frequently googled question and someone might benefit from it
-
Sanjay Achar almost 5 yearsThanks, in my case I was loading two instances of jQuery.
-
hard123 almost 5 yearsEra meu problema também ! Obrigado !
-
Love Putin about 4 yearsEssa é uma boa resposta. Foi atolado por isso por algum tempo.
-
Abdulkarim Kanaan almost 4 yearsyou deserve a thums up
-
Đỗ Tiến over 2 yearsI change to grasp the modal directly by
$(".modalClassName")
and it works... -
Joseph Ali over 2 yearsthanks, this worked for me.., I'm importing multiple jquery libs :
ajax.googleapis.com/ajax/libs/jquery/
, andcode.jquery.com/jquery-3.6.0