CODEWITHSUNDEEP
javascriptjqueryhtml
Raff
Raff

Reputation: 313

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

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>

Upvotes: 8

Views: 34542

Answers (6)

kausmil
kausmil

Reputation: 11

Your web page loading times will probably be very fast. Then the modal('show') event is not bound in the selector tag.

It creates an error.

$(document).ready(function() { $("selectorName").modal('show'); });

Upvotes: 0

user1723453
user1723453

Reputation: 181

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"

Upvotes: 1

Farhan Yudhi Fatah
Farhan Yudhi Fatah

Reputation: 385

  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();

Upvotes: 1

SAMSON MATTHEW
SAMSON MATTHEW

Reputation: 1

Bootstrap modal does not work well with jQuery UI dialog

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 . It's also important to note that bootstrap actually needs jQuery to define the modal function , so it's vital that you include jQuery before including bootstrap's javascript. To avoid such error just be sure to include jQuery then bootstrap's javascript before you call the modal function.

Upvotes: 0

Raff
Raff

Reputation: 313

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

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

Upvotes: 10

Saurabh Mistry
Saurabh Mistry

Reputation: 13689

try this :

$(document).ready(function(){
  $('#exampleModal').modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Upvotes: -1

Related Questions