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

Question

I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view. I\'m working with Codeigniter 2.1. Following Dynamically inserting a boo

Answer 1

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

$(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>

Answer 2

In my experience, most probably its happened with jquery version(using multiple version) conflicts, for sort out the issue we can use a no-conflict method like below.

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);

Answer 3

I resolved this issue in Laravel by modifing the line below in resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

to

window.$ = window.jQuery = require('jquery/dist/jquery');

Answer 4

I had the same issue. Changing

$.ajax(...)

to

jQuery.ajax(...)

did not work. But then I found that jQuery was included twice and removing one of them fixed the problem.

Answer 5

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

also check if jQuery is not included twice

:)

it was the issue for me

Answer 6

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:

<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>