Uncaught TypeError: $(...).modal is not a function

Question

I want to show a modal in my website on page load. But I got this error

Uncaught TypeError: $(...).modal is not a function

I have also tried with jQuery but also get the same type of error

Uncaught TypeError: jQuery(...).modal is not a function

I have googling already several times and apply different solutions but not succeeded.

Here is my script

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
   $(window).on('load',function(){
      $('#loadModal').modal('show');
   });
</script>

Here is my modal

<div class="modal hide fade" id="loadModal">
    <div class="modal-header">
         <a class="close" data-dismiss="modal">×</a>
         <h3>Modal header</h3>
    </div>
    <div class="modal-body">
         <p>One fine body…</p>
    </div>
    <div class="modal-footer">
         <a href="#" class="btn">Close</a>
         <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

Answer 1

Solved !!! It's a order related problem.

bootstrap.min.js should declared after all jQuery libraries.

Answer 2

1. jQuery must be referenced first, so you must call the jquery.min.js and then bootstrap.min.js. Try this :

    <script src="/jquery-3.3.1.min.js"></script> 
    <script src="/bootstrap.min.js"></script>
   

2. Sometimes 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. The problem is due to having jQuery instances more than one time. I have solved this problem with this code in jQuery :

    window.$('#modal-id').modal();
   

Answer 3

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 below import to the jsx solved the problem.

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