Reputation: 313
I want to show a modal in my website on page load. But I got this error
Uncaught TypeError: $(...).modal is not a function
I have also tried with jQuery
but also get the same type of error
Uncaught TypeError: jQuery(...).modal is not a function
I have googling already several times and apply different solutions but not succeeded.
Here is my script
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on('load',function(){
$('#loadModal').modal('show');
});
</script>
Here is my modal
<div class="modal hide fade" id="loadModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
Upvotes: 8
Views: 34542
Reputation: 11
Your web page loading times will probably be very fast. Then the modal('show') event is not bound in the selector tag.
It creates an error.
$(document).ready(function() { $("selectorName").modal('show'); });
Upvotes: 0
Reputation: 181
I added a modal dialog in jsp and tried to open it with javascript in jsx and hit the same error: "...modal is not a function"
In my case, simply by adding below import to the jsx solved the problem.
import "./../bower/bootstrap/js/modal.js"; // or import ".../bootstrap.min.js"
Upvotes: 1
Reputation: 385
jQuery must be referenced first, so you must call the jquery.min.js and then bootstrap.min.js. Try this :
<script src="/jquery-3.3.1.min.js"></script>
<script src="/bootstrap.min.js"></script>
Sometimes this warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly. The problem is due to having jQuery instances more than one time. I have solved this problem with this code in jQuery :
window.$('#modal-id').modal();
Upvotes: 1
Reputation: 1
Bootstrap modal does not work well with jQuery UI dialog
The bootstrap Modal error is actually the result of you not including bootstrap's javascript before calling the modal function. Modal is defined in bootstrap.js
and not in jQuery . It's also important to note that bootstrap actually needs jQuery to define the modal function , so it's vital that you include jQuery before including bootstrap's javascript. To avoid such error just be sure to include jQuery then bootstrap's javascript before you call the modal function.
Upvotes: 0
Reputation: 313
Solved !!! It's a order related problem.
bootstrap.min.js
should declared after
all jQuery
libraries.
Upvotes: 10
Reputation: 13689
try this :
$(document).ready(function(){
$('#exampleModal').modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Upvotes: -1