CODEWITHSUNDEEP
jquery
Jhapz Mendoza
Jhapz Mendoza

Reputation: 53

Jquery uncaught type error on html button element

I'm getting this error

"Uncaught TypeError: jQuery(...).modal is not a function at HTMLButtonElement.onclick"

in this line

<button class="btn btn-default form-control" onclick="jQuery('#colorModal').modal('show'); return false;">Quantity and Color</button>

trying to open this modal, modal line:

<div class="modal fade modal-bg" id="colorModal" tabindex="-1" role="dialog" aria-labelledby="colorModalLabel" aria-hidden="true">

Upvotes: 2

Views: 286

Answers (1)

Armin Nikdel
Armin Nikdel

Reputation: 335

Modal is not a jQuery function. Your code is based on Bootstrap's Modal, therefor you need to embed bootstrap right after jQuery:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 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>

Here is a living example: https://jsfiddle.net/95mqj46d/4/

Upvotes: 1

Related Questions