$(...).modal is not a function

Question: How do you resolve the error that says "$(....).modal is not a function" in Bootstrap 5 and jQuery 3.6.0 ?


Answer: There is a big chance that you are calling the jQuery and Boostrap CDN or scripts way later than you are calling the $('.MyModal').modal('show'); check the steps to verify that everything is how it is supposed to be.

1. Check that you have loaded only one version of each, Bootstrap, Popperjs, and jQuery.
2. Verify that jQuery, Bootstrap 5, and Popperjs are loaded in this order. 
     - First, load jQuery in your Dom (Am not sure if Bootstrap 5 went away with depending on jQuery, if yes comment below)
     - Second, load the Boostrap script in your Dom
     - Third, load Popperjs
3. Very that jQuery is properly loaded and that there is no error in the Browser Dev Console, check the Network tab too, to be sure no 404 on any resources.
4. If you still have a problem with the Bootstrap 5 Modal not showing up, see below:
     - Make sure you have created your script as shown in the code.

$(document).ready(function(){
 //code to show your modal in here    
  })

This will make sure that the code that shows the modal is executed when the page has loaded and all the scripts are loaded as well.

- Leave a comment below indicating if this helped you.


Edit this Article
modal is not a function Boostrap 5 Modal not working ebook jQuery Front-End Technology published
Was this page helpful?
Yes Yes! this solution to the problem was helpful. No No! this solution to the problem was not helpful.. Leave ErnesTech Feedback.Feedback
If you log in, you will be notified when someone leaves a comment.

Other users would like to know if this solution helped you.

Your Session is Ending
Login to Continue

© 2021 - ErnesTech - Privacy