Error opening: method show does not exist on jQuery.modal
So I'm trying to get the modal to persist even when the toggle button is clicked using the $('#myModal').modal('show');
show method works when outside the .click () function, but doesn't talk about such a method when it is inside the .click () function
As such
$('document').ready(function() {
$('#my-toggle-button').click(function() {
$('#myModal').modal('show'); // Throws up the below error
});
});
Mistake:
Uncaught Error: Method show does not exist on jQuery.modal
at Function.error (jquery-2.2.4.min.js:2)
at n.fn.init.a.fn.modal (materialize.min.js:8)
at HTMLAnchorElement.<anonymous> (myScript.js:4)
at HTMLAnchorElement.dispatch (jquery-2.2.4.min.js:3)
at HTMLAnchorElement.r.handle (jquery-2.2.4.min.js:3)
However, it works great when
$('document').ready(function() {
$('#myModal').modal('show'); // Works fine
$('#my-toggle-button').click(function() {
});
});
Update: Turns out this is caused due to import script having defer and aysnc. I don't know what place they should be using as they don't recognize the modal.
source to share
This issue occurs when trying to execute bootstrap modal when you are also using materializecss, the best recommendation is to use the materializecss modal.
http://materializecss.com/modals.html
//initialize all modals
$('.modal').modal({
dismissible: true
});
//call the specific div (modal)
$('#modal2').modal('open');
Enjoy!
source to share
Please check the link for bootstrap.js or bootstrap.min.js file. The file must include the modals component . Also you need to check the modal and button ids. The code should work fine, see snippet below.
$('#my-toggle-button').click(function() {
$('#myModal').modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button id="my-toggle-button" class="btn btn-default">Push Me</button>
source to share