Rectangle 27 0

javascript TypeError: $(...).modal is not a function with bootstrap Modal?


$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

After linking up your jquery and bootstrap write your code just below the Script tags of jquery and bootstrap.

Note
Rectangle 27 0

javascript TypeError: $(...).modal is not a function with bootstrap Modal?


$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

After linking up your jquery and bootstrap write your code just below the Script tags of jquery and bootstrap.

Note
Rectangle 27 0

javascript TypeError: $(...).modal is not a function with bootstrap Modal?


Also happened when I put lower version of jquery in a conditional include for ie8. <!--[if lt IE 9]>

Also make sure no other libraries bundle jQuery in their own min files (DataTables does this in some cases)

also check if jQuery is not included twice

i just want to emphasize what mwebber said in the comment:

it was the issue for me

Note
Rectangle 27 0

javascript TypeError: $(...).modal is not a function with bootstrap Modal?


Also happened when I put lower version of jquery in a conditional include for ie8. <!--[if lt IE 9]>

Also make sure no other libraries bundle jQuery in their own min files (DataTables does this in some cases)

also check if jQuery is not included twice

i just want to emphasize what mwebber said in the comment:

it was the issue for me

Note
Rectangle 27 0

javascript TypeError: $(...).modal is not a function with bootstrap Modal?


<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

The order is really matters first lib then bootstrap...

This error is actually the result of you not including bootstrap's javascript before calling the modal function. Modal is defined in bootstrap.js not 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 the error just be sure to include jQuery then bootstrap's javascript before you call the modal function. I usually do the following in my header tag:

Note
Rectangle 27 0

javascript TypeError: $(...).modal is not a function with bootstrap Modal?


Another possibility is that one of the other scripts your including is causing the problem by also including JQuery or conflicting with $. Try removing your other included scripts and see if it fixes the issue. In my case, after hours of needlessly searching my one code, I removed scripts in a binary search pattern and discovered the offending script right away.

Note
Rectangle 27 0

javascript TypeError: $(...).modal is not a function with bootstrap Modal?


<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

The order is really matters first lib then bootstrap...

This error is actually the result of you not including bootstrap's javascript before calling the modal function. Modal is defined in bootstrap.js not 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 the error just be sure to include jQuery then bootstrap's javascript before you call the modal function. I usually do the following in my header tag:

Note
Rectangle 27 0

javascript TypeError: $(...).modal is not a function with bootstrap Modal?


Another possibility is that one of the other scripts your including is causing the problem by also including JQuery or conflicting with $. Try removing your other included scripts and see if it fixes the issue. In my case, after hours of needlessly searching my one code, I removed scripts in a binary search pattern and discovered the offending script right away.

Note