Uncaught Error: Method show does not exist on jQuery.modal

Question

So I'm trying to force keep the bootstrap modal showing even on the toggle button click using $('#myModal').modal('show'); show method works when outside .click() function but says no such 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
    });

});

Error:

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 fine when

$('document').ready(function() {

    $('#myModal').modal('show'); // Works fine

    $('#my-toggle-button').click(function() {   

    });

});

Update: Turns out it's being caused because of script imports having defer and aysnc. I don't know what's the right place to use these as they don't recognize modal.

Solution 1

This problem occurs when trying to execute a 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!

Solution 2

Please, check the reference to bootstrap.js or bootstrap.min.js file. The file must include modals component. Also you need to check identificators of the modal and the button. The code must work fine, see the 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">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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>

Solution 3

If you are using materializecss then just include it before bootstrap like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="/static/js/bootstrap/dist/js/bootstrap.js"></script>

Then you can use this function to display modal

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