122

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 bootstrap modal partial view into a view, I have:

<div id="modal_target"></div>

as the target div for insertion. I have a button in my view that looks like:

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

My JS has:

$.ajax({
    type    : 'POST', 
    url     : "AjaxUpdate/get_modal",
    cache   : false,
    success : function(data){ 
       if(data){
            $('#modal_target').html(data);

            //This shows the modal
            $('#form-content').modal();
       }
    }
});

The button of the main view is:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

Here is what I'd like to store separately as a partial view:

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="user">User</label>
              <div class="controls">
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="old">Old password</label>
              <div class="controls">
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="new">New password</label>
              <div class="controls">
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="repeat">Repeat new password</label>
              <div class="controls">
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>

When I click the button, the modal is inserted correctly, but I get the following error:

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

How can I fix this?

Community
  • 1
  • 1
user1592380
  • 34,265
  • 92
  • 284
  • 515

15 Answers15

213

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

adsurbum
  • 3,107
  • 3
  • 22
  • 27
  • 1
    Remember: Be sure to check ajax called files for jQuery too. – Mister Verleg Jan 18 '16 at 14:24
  • Also happened when I put lower version of jquery in a conditional include for ie8. – Jen Aug 10 '16 at 11:53
  • 10
    Also make sure no other libraries bundle jQuery in their own min files (DataTables does this in some cases) – gillytech Feb 02 '17 at 06:34
  • Don't forget to check imports, like: import '../jquery-3.3.1.js'; – Reza Jul 30 '18 at 07:08
  • 1
    ...and what does one do in that event? @gillytech – redress Dec 19 '19 at 01:14
  • I am in a **catch 22** situation. In my Django app, I have menubar as well as modal windows. As per convention, most of my libraries are housed in the **parent** tamplate. Whichever pages have the modal, ref. to the bootstrap library is added. Now something funny happens with the menu bar - **they need to be clicked twice** to be activated. Other pages without the modal does not have this problem. Could somebody suggest as to what might be wrong? – Love Putin Not War Jun 21 '20 at 13:03
106

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>
davetw12
  • 1,815
  • 2
  • 20
  • 27
54

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>
msanford
  • 11,803
  • 11
  • 66
  • 93
Rahul Mehra
  • 710
  • 5
  • 7
14

I have resolved this issue in react by using it like this.

window.$('#modal-id').modal();
Zaman Afzal
  • 2,009
  • 17
  • 23
7

Check that jquery library not included in html that load via Ajax .remove <script src="~/Scripts/jquery[ver].js"></script> in your AjaxUpdate/get_modal

Moslem7026
  • 3,290
  • 6
  • 40
  • 51
7

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.

brad12s
  • 419
  • 2
  • 7
  • 17
7

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);
Jaison James
  • 4,414
  • 4
  • 42
  • 54
5

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');
Aniko Litvanyi
  • 2,109
  • 1
  • 21
  • 25
Radostin Stoyanov
  • 316
  • 2
  • 8
5

Run 

npm i @types/jquery
npm install -D @types/bootstrap

in the project to add the jquery types in your Angular Project. After that include

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

in your app.module.ts

Add 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

in your index.html just before the body closing tag.

And if you are running Angular 2-7 include "jquery" in the types field of tsconfig.app.json file.

This will remove all error of 'modal' and '$' in your Angular project.

cyperpunk
  • 664
  • 7
  • 13
3

In my case, I use rails framework and require jQuery twice. I think that is a possible reason.

You can first check app/assets/application.js file. If the jquery and bootstrap-sprockets appears, then there is not need for a second library require. The file should be similar to this:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Then check app/views/layouts/application.html.erb, and remove the script for requiring jquery. For example:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

I think sometimes when newbies use multiple tutorial code examples will cause this issue.

B Liu
  • 113
  • 1
  • 5
2

For me, I had //= require jquery after //= require bootstrap. Once I moved jquery before bootstrap, everything worked.

Micah Rothenbuhler
  • 66
  • 4
2

Other answers din't work for me in my react.js application, so I have used plain JavaScript for this.

Below solution worked:

  1. Give an id for close part of the modal/dialog ("myModalClose" in below example)
<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...
  1. Generate a click event to the above close button, using that id:
   document.getElementById("myModalClose").click();

Possibly you could generate same click on close button, using jQuery too.

Hope that helps.

Manohar Reddy Poreddy
  • 25,399
  • 9
  • 157
  • 140
1

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.

Manatax
  • 4,083
  • 5
  • 30
  • 40
Levitica
  • 56
  • 1
  • 3
0

Could also be bootstrap modal being called before the javascript files are loaded which is what happened to me. I was calling a function on page load which resulted in this error. Resolved it by calling the function via the onload event.

window.onload = function () {
  callYourFunctionOrAjaxHere();
}
DannyC
  • 401
  • 4
  • 15
-2

I guess you should use in your button 

<a data-toggle="modal" href="#form-content"

instead of href there should be data-target

<a data-toggle="modal" data-target="#form-content"

just be sure, that modal content is already loaded

I think problem is, that showing modal is called twice, one in ajax call, that works fine, you said modal is shown correctly, but error probably comes with init action on that button, that should handle modal, this action cant be executed, because modal is not loaded at that time.

Brzochod
  • 1
  • 2