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

user_4150385 0
Viewed 13688

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.

bootstrap-modal twitter-bootstrap html jquery javascript
3 Answers

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!

user_80492470

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');
user_45878210
Related