Bootstrap $ ('# myModal'). Modal ('show') does not work

Question

I am not sure why, but all modal functions do not work with me. I checked the version, and their load is excellent.

I keep getting this error message:

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

to hide, I already found an alternative. instead:

 $('#myModal').modal('hide'); 

I used this:

 $('#myModal .close').click(); 

And it works great.

Now the problem is showing

 $('#myModal').modal("show"); 

I also tried both

 $('#myModal').modal("toggle"); 

and

 $('#myModal').modal(); 

but unfortunately none of them work.

Here is the html code - when I click the button I will do some verification and process the json data from the web service, if it succeeds, then I want to show my modal - everything works, except for the show.

  <button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button> 

if there is any alternative i would like to know.

Answer 1

The most common cause of such problems is

1.If you have defined the jquery library more than once.

 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="modal fade" id="myModal" aria-hidden="true"> ... ... </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

The bootstrap library is applied to the first jquery library, but when you reload the jquery library, the bootstrap load is lost (the modal function is in bootstrap).

2.Please wrap your JavaScript code inside

 $(document).ready(function(){}); 

3. Check if the modality identifier is identical

like the one you defined for the component (also check for duplication of the same identifier).

Answer 2

I have the same problem when working with a modular popup bootstrap, I used Id and a click trigger event to show and highlight modal popups instead of $ ("# Id"). modal ('show') and $ ("# id") .modal ('hide'), `

  <button type="button" id="btnPurchaseClose" class="close" data dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button> <a class="btn btn-default" id="btnOpenPurchasePopup" data-toggle="modal" data target="#newPurchasePopup">Select</a> $('#btnPurchaseClose').trigger('click');// for close popup $('#btnOpenPurchase').trigger('click');`// for open popup 

Answer 3

This can happen for several reasons:

1. You forgot to include the jquery library in the document
2. You have included the jquery library in a document more than once
3. You forgot to include the bootstrap.js library in the document
4. The versions of your Javascript and Bootstrap do not match. Consult the bootstrap documentation to make sure the versions match.
5. There is no modal class in the modal <div>
6. The modal <div> identifier is invalid. (for example: you incorrectly added # to id <div> )
7. #Jquery selector missing sign #

Answer 4

My main reason was that I forgot to add # before the id name. Lame, but true.

Of

 $('scheduleModal').modal('show'); 

For

 $('#scheduleModal').modal('show'); 

For your reference, the code sequence that works for me is

 <script> function scheduleRequest() { $('#scheduleModal').modal('show'); } </script> <script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js"/>"> </script> <script src="<c:url value="/resources/plugins/fastclick/fastclick.min.js"/>"> </script> <script src="<c:url value="/resources/plugins/slimScroll/jquery.slimscroll.min.js"/>"> </script> <script src="<c:url value="/resources/plugins/datatables/jquery.dataTables.min.js"/>"> </script> <script src="<c:url value="/resources/plugins/datatables/dataTables.bootstrap.min.js"/>"> </script> <script src="<c:url value="/resources/dist/js/demo.js"/>"> </script> 

Answer 5

Use .modal({show:true}) and .modal({show:false}) instead of ('show') and ('hide') ... this seems to depend on the bootstrap version / jquery version. Hope it helps.

Answer 6

Try this without a parameter

 $('#myModal').modal(); 

he should work

Answer 7

use the object to call ...

 <a href="#" onclick='$("#myModal").modal("show");'>Try This</a> 

or if you use ajax to show that it is modal after getting the result, this is work for me ...

 $.ajax({ url: "YourUrl", type: "POST", data: "x=1&y=2&z=3", cache: false, success: function(result){ // Your Function here $("#myModal").modal("show"); } }); 

Answer 8

Are you sure the id of modal is "myModal"? if not, then the call does not call it.

also - only after reading the message - you call the function / check with this button

 <button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button> 

and then, if all is well - you want to call modal. - if it is an hte case - then you must remove the switch from this button. I assume that the event handler is attached to this click? you will need .modal ("show") as part of this function. does not switch from this button. also - this id is correct "creatNewAcount" unlike this spelling "createNewAccount"

 <button type="button" id="creatNewAcount" class="btn btn-default" >Sign up</button> 

Answer 9

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script> 

the first googleapis script is not working, now days use this second script specified by jquery

Answer 10

The jQuery lib is loaded first. In my case, I first downloaded the boot library, also tested the tag with a target, and fired a click trigger. But the main problem was that jquery first loads.

Answer 11

PLEASE PLEASE PLEASE Help. I looked at all the answers and I am trying to get this to work, but I am not getting any results.

my modal, which is at the bottom of my view (.cshtml)

 <div class="modal fade" id="DeleteModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="#" class="close" data-dismiss="modal">&times;</a> <h3 class="modal-title">Manage Profile Image Delete</h3> </div> <div class="modal-body"> hello world <h3>Are You Sure? You Want To Delete This Image</h3> <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#" class="btn btn-success" data-dismiss="modal" onclick="DeleteImage()">Confirm</a> </div> </div> </div> 

the button that starts the show is in the html user helper that looks like this (I know this calls the function because the alert is configured to show progress)

  TagBuilder trashTb = new TagBuilder("a"); trashTb.Attributes["href"] = "#"; trashTb.Attributes["onclick"] = "ConfirmDelete(" + img.Id + ")"; onclick="ConfirmDelete(15)" 

in the external js file here is the show method

 var ConfirmDelete = function (imageId) { alert(imageId); $("#hiddenImageId").val(imageId); $("#DeleteModal").modal("show"); 

}

the alert works, and as soon as I close the alert page, it loses focus, but not modal

here are my scripts in the order in which they appear in the source

  <link href="/Content/Bootstrap-Lumin.css" rel="stylesheet"/> 

 <script src="/Scripts/modernizr-2.8.3.js"></script> <script src="/Scripts/jquery-3.3.1.js"></script> <script src="/Scripts/bootstrap.js"></script> <script src="/Scripts/JustAsk/Helpers.js"></script> <script src="/scripts/jquery.validate.min.js"></script> <script src="/scripts/jquery.validate.unobtrusive.min.js"></script> <script src="/Scripts/jquery.validate.js"></script> 

Answer 12

 <div class="modal fade" id="myModal" aria-hidden="true"> ... ... </div> 

Note: remove the extinction class from the div and enjoy it should work

Answer 13

You are welcome,

try and check if the launch button has a type = "button" attribute. Working example:

  <button type="button" id="trigger" style="visibility:visible;" onclick="modal_btn_click()">Trigger Modal Click</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>This is a small modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script > function modal_btn_click() { $('#myModal').modal({ show: true }); } </script>