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

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.

Answer 2

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.

Answer 3

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

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

Answer 4

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.

Answer 5

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

window.$('#modal-id').modal();

Answer 6

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.