TypeError: $(...).modal is not a function with bootstrap Modal
Solution 1
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
Solution 2
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>
Solution 3
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>
Solution 4
I have resolved this issue in react by using it like this.
window.$('#modal-id').modal();
Solution 5
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
Related videos on Youtube
user1592380
Updated on November 17, 2020Comments
-
user1592380 over 3 years
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?
-
mwebber over 9 yearsCheck if it will work with
jQuery(...).modal
. your jQuery may be in compatability mode, also check if jQuery is not included twice. -
LJ Wadowski over 9 yearsthere is a big probability that bootstrap.js is not loaded before you try to call .modal()
-
user1592380 over 9 yearsmwebber - I'm not experienced with js , How do I "Check if it will work with jQuery(...).modal." I assume in the console somehow? Etsitra , bootstrap.js is loaded in header before all this happens.
-
vp_arth over 9 yearsIt means: try
jQuery('#form-content').modal();
-
user1592380 over 9 yearsBut where? in the console commandline ? I'm not thyat familiar with js workflows
-
Himaan Singh about 8 yearsinstead of $('#form-content').modal(); use jQuery('#form-content').modal();
-
guitarlass over 7 yearsAnyone coming here for an answer like i did, see if its
.modal()
notmodel()
. Such a lame mistake. drained me. :( -
vsocrates about 5 yearsWhy does it matter if jQuery is included twice or not?
-
Muhammad Shahzad about 4 years
window.$('#modalid').modal('hide');
try this
-
-
Mister Verleg over 8 yearsRemember: Be sure to check ajax called files for jQuery too.
-
Jen almost 8 yearsAlso happened when I put lower version of jquery in a conditional include for ie8. <!--[if lt IE 9]>
-
gillytech over 7 yearsAlso make sure no other libraries bundle jQuery in their own min files (DataTables does this in some cases)
-
WEshruth over 6 yearsThank you @davetw12, it helped a lot
-
Reza almost 6 yearsDon't forget to check imports, like: import '../jquery-3.3.1.js';
-
redress over 4 years...and what does one do in that event? @gillytech
-
Ryan Griggs over 4 yearsjQuery slim doesn't include modal().
-
Love Putin about 4 yearsI 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?
-
Mr. Perfectionist almost 4 yearsCorrect Answer. :-)
-
Gwyneth Llewelyn over 2 yearsAnd that's why it didn't work.
-
MertHaddad about 2 yearsis this considered as a good practice?