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

Question

i've been trying to call bootstrap modal from jquery and keep getting this error message :

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

Here is my code :

<button id="btnTest" class="btn btn-default">Show Modal</button>
<div id="dummyModal" role="dialog" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" data-dismiss="modal" class="close">&times;</button>
          <h4 class="modal-title">Error</h4>
        </div>
        <div class="modal-body">
          <p>Quick Brown Fox Jumps Over The Lazy Dog</p>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript">
  $('document').ready(function () {
    $('#btnTest').click(function () {
        $('#dummyModal').modal('show');
    });
  });
</script>

FYI, i use bootstrap 3.3.5 and jquery 1.11.3. i've tried jQuery.noConflict(); ... etc from this thread but still no luck. Here's the complete code

Anyways, did you read [this](http://getbootstrap.com/javascript/)? There is a part about modals... — dingo_d, Sep 01 '15 at 07:44
@dingo_d well no, not really, i'm just testing this. is it not compatible with jquery 1.x ? — sad301, Sep 01 '15 at 07:47
its working fine here, https://jsfiddle.net/dreamweiver/DTcHh/11628/ also i cant `bootstrap.css` in your script, thats the reason for your issue though — dreamweiver, Sep 01 '15 at 07:51
I just created a fiddle from your code http://jsfiddle.net/d7t5yy9a/1/, It is working without error , Please check you dont have included Jquery twice — Tushar Gupta, Sep 01 '15 at 07:51
working codepen example http://codepen.io/anon/pen/XmWeyP without modifying a thing, your problem is coming from somewhere else than the code you are showing — dvhh, Sep 01 '15 at 07:59
make sure you are loading jquery version 10+ and bootstrap js properly. your code is working [here](http://jsfiddle.net/SantoshPandu/d7t5yy9a/2/) — J Santosh, Sep 01 '15 at 08:00
@dreamweiver my `bootstrap.css` is in the `` tag. here is my complete code -> [http://pastebin.com/tgKaK3Gx](http://pastebin.com/tgKaK3Gx). you're using jquery 1.11.0 in your code, i think i'll try that version — sad301, Sep 01 '15 at 08:04
The codepen that dvhh uses (which works) uses jquery 2.1.3, try using different jquery version. — dingo_d, Sep 01 '15 at 08:17
I've modified it by loading bootstrap and jquery from CDN, and now it woks, i think the problem came from the server code — sad301, Sep 01 '15 at 08:24
Pls check it out - https://stackoverflow.com/a/46998261/1374554 — Jaison James, Oct 29 '17 at 08:36

score 16 · Accepted Answer · edited Aug 03 '17 at 22:06

Use this. It will work. I have used bootstrap 3.3.5 and jquery 1.11.3

$('document').ready(function() {
  $('#btnTest').click(function() {
    $('#dummyModal').modal('show');
  });
});

body {
  background-color: #eee;
  padding-top: 40px;
  padding-bottom: 40px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <title>Modal Test</title>
</head>

<body>
  <div class="container">
    <button id="btnTest" class="btn btn-default">Show Modal</button>
    <div id="dummyModal" role="dialog" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" data-dismiss="modal" class="close">&times;</button>
            <h4 class="modal-title">Error</h4>
          </div>
          <div class="modal-body">
            <p>Quick Brown Fox Jumps Over The Lazy Dog</p>
          </div>
          <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

score 8 · Answer 2 · answered Feb 14 '17 at 13:13

I had also faced same error when i was trying to call bootstrap modal from jquery. But this happens because we are using bootstrap modal and for this we need to attach one cdn bootstrap.min.js which is

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Hope this will help as I missed that when i was trying to call bootstrap modal from jQuery using

$('#button').on('click',function(){ $('#myModal').modal(); });

myModal is the id of Bootstrap modal and you have to give a click event to a button when you call click that button a pop up modal will be displayed.

score 5 · Answer 3 · answered Oct 09 '20 at 18:16

5

Adding the jquery*.js file reference twice can also cause the issue. It could be part of your bundle and you might have added to the page too. Hence you need to remove the additional reference like

answered Oct 09 '20 at 18:16

adarsh nair

55
1
3

score 4 · Answer 4 · answered Apr 09 '19 at 09:08

4

I was getting the same error because of jquery CDN (<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>) was added two times in the HTML head.

answered Apr 09 '19 at 09:08

bSr

1,410
3
16
30

score 0 · Answer 5 · answered Mar 03 '22 at 04:28

I was having this issue due to my dataTables JS file that uses jquery being loaded before the JQuery JS file. Changing the order of the JS files fixed it.. :|

E.g.

Before:

    <link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

After:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

score -2 · Answer 6 · answered Jun 10 '16 at 08:30

-2

If you are using any layout page then, move script sections from bottom to head section in layout page. bcz, javascript files should be loaded first. This worked for me

answered Jun 10 '16 at 08:30

Raj K

568
6
11

This answer is too wrong. Javascript should NOT be loaded first. – rochasdv Jan 08 '18 at 17:37
Sorry, if you'd like to use modal function in jquery, first you need to load jquery file. How can it be wrong? – Raj K Jan 25 '18 at 15:25
I got you, the problem with writing scripts at the head of a page is blocking. The browser must stop processing the page until the script is download, parsed and executed. The reason for this is pretty clear, these scripts might insert more into the page changing the result of the rendering, they also may remove things that dont need to be rendered, etc. But there are sometimes the need to load some scripts before to load the page, but for this occasions I would seek a way to load this scripts asynchronously – rochasdv Jan 26 '18 at 20:38

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

6 Answers6

Linked