Rectangle 27 0

javascript Bootstrap modal: is not a function?


Note
Rectangle 27 0

javascript Bootstrap modal: is not a function?


<!-- 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>

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).

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

Note
Rectangle 27 0

javascript Bootstrap modal: is not a function?


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

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.

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 !

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.

Very good hint, I had jquery npm installed in Aurelia and also manually loaded in index.html. Thanks!

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 .

Note
Rectangle 27 0

javascript Bootstrap modal: is not a function?


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

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.

Note
Rectangle 27 0

javascript Bootstrap modal: is not a function?


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

jQuery should be the first:

Note