$(...).modal is not a function jquery.min.js

Question

I have a modal that I want to open on the page load. But, I got this error: `

jquery.min.js:2 Uncaught TypeError: $(...).modal is not a function at HTMLDocument.<anonymous> ((index):491) at j (jquery.min.js:2) at k (jquery.min.js:2)

Here's my jquery cdn inclusion and it is working except the modal:

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha512-3P8rXCuGJdNZOnUx/03c1jOTnMn3rP63nBip5gOP2qmUh5YAdVAvFZ1E+QLZZbC1rtMrQb+mah3AfYW11RUrWA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    $('#myModal').modal('show');
  });
</script>

Does this answer your question? [Bootstrap modal: is not a function](https://stackoverflow.com/questions/25757968/bootstrap-modal-is-not-a-function) — Pogrindis, Mar 15 '21 at 11:23
The script indicates that bootstrap.js is not loading correctly. Check your browser console+network tab. Try one from the cdnjs.cloudflare.com — freedomn-m, Mar 15 '21 at 11:23
Your code works fine and does not display that error - as you can see in the snippet I edited in to your question. The only reason the modal doesn't display there is because you've forgotten to include the Bootstrap CSS file. Check that the code in the question is ***exactly*** the same as what you're using to test. — Rory McCrossan, Mar 15 '21 at 11:24
Also in jsfiddle if you want to see it there: https://jsfiddle.net/hgf8d9kn/ — freedomn-m, Mar 15 '21 at 11:24
It's possible, in your actual page, that you have an **additional jquery ` — freedomn-m, Mar 15 '21 at 11:34

Mosia Thabo · Answer 1 · 2021-03-15T12:13:32.250

Your code is in fact correct.

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

This error probably occured because the code ran before bootstrap was included. It might have happened that by the time it runs while remote cdn hadn't loaded the bootstrap, and js won't recognize all bootstrap functions.

Since the snippet you provided doesn't actually show any results, add the bootstrap css files and you will realize that it actually works.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha512-3P8rXCuGJdNZOnUx/03c1jOTnMn3rP63nBip5gOP2qmUh5YAdVAvFZ1E+QLZZbC1rtMrQb+mah3AfYW11RUrWA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    $('#myModal').modal('show');
  });
</script>

This is correct in that it works, but doesn't address the problem the OP has where the error states that 'modal is not a function' — Rory McCrossan, Mar 15 '21 at 11:44
Cool, I've just added some explanation on the causes of that error. — Mosia Thabo, Mar 15 '21 at 12:14

score 0 · Answer 2 · answered Mar 15 '21 at 11:35

you forgot to add boostrap css and model don't have anycontent so that's why we cant see any output

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
       test model
    </div>
  </div>
</div>


<script>
  $(document).ready(function() {
    $('#myModal').modal('show');
  });
</script>

This is correct in that it works, but doesn't address the problem the OP has where the error states that 'modal is not a function' — Rory McCrossan, Mar 15 '21 at 11:44

score 0 · Answer 3 · answered Oct 24 '22 at 14:30

0

Thanks for other answers which remind me of $(document).ready(function(){ });

I wrapped my code inside that and then the issue is gone, I don't know why though.

Hope that helps.

answered Oct 24 '22 at 14:30

Ian Y.

2,293
6
39
55

$(...).modal is not a function jquery.min.js

3 Answers3