CODEWITHSUNDEEP
javascripthtmljquerybootstrap-4
ertyu
ertyu

Reputation: 43

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

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>

Upvotes: 2

Views: 15643

Answers (4)

Harst Logics
Harst Logics

Reputation: 29

Mostly this is caused by conflicting scripts. In my case, I didn't make all scripts dynamic and so

had Delimiters omitted. I properly edited everything including images and it worked for me.

Upvotes: 0

Ian Y.
Ian Y.

Reputation: 2457

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.

Upvotes: 0

Mosia Thabo
Mosia Thabo

Reputation: 4267

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>

Upvotes: 4

Subbu Gitam
Subbu Gitam

Reputation: 19

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>

Upvotes: 0

Related Questions