I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says :
$(...).modal is not a function
This is my Modal HTML :
<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">
Submit changes
</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
And this is my JavaScript to run it with when a window is loaded :
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
How can I fix this problem?
This question is related to
javascript
jquery
html
bootstrap-modal
jQuery should be the first:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
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 the missing import to the jsx solved the problem.
`import "./../bower/bootstrap/js/modal.js"; // or import ".../bootstrap.min.js"`
Struggled to solve this one, checked the load order and if jQuery was included twice via bundling, but that didn't seem to be the cause.
Finally fixed it by making the following change:
(before):
$('#myModal').modal('hide');
(after):
window.$('#myModal').modal('hide');
Found the answer here: https://github.com/ColorlibHQ/AdminLTE/issues/685
I meet this error when integrate modal bootstrap in angular.
This is my solution to solve this issue.
I share for whom concern.
First step you need install jquery
and bootstrap
by npm
command.
Second you need add declare var $ : any;
in component
And use can use $('#myModal').modal('hide');
on onSave() method
Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
Causes for TypeError: $(…).modal is not a function:
Solutions:
In case, if a script attempt to access an element that hasn't been reached yet then you will get an error. Bootstrap depends on jQuery, so jQuery must be referenced first. So, you must be called the jquery.min.js and then bootstrap.min.js and further 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. So the script should be included in this manner
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
In case if there are multiple instances of jQuery, the second jQuery
declaration prevents bootstrap.js from working correctly. so make use of
jQuery.noConflict();
before calling the modal popup
jQuery.noConflict();
$('#prizePopup').modal('show');
jQuery event aliases like .load
, .unload
or .error
deprecated since jQuery 1.8.
$(window).on('load', function(){
$('#prizePopup').modal('show');
});
OR try opening the modal popup directly
$('#prizePopup').on('shown.bs.modal', function () {
...
});
I'm a bit late to the party, however there's an important note:
Your scripts might be in the right order but watch out for any async
s in your script tag (like this)
<script type="text/javascript" src="js/bootstrap.js" async></script>
This might be causing the issue. Especially if you have this async
set only for Production environments this can get really frustrating to reason about.
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.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
change the order of the script
Because bootstrap is a jquery plugin so it require Jquery to execute
Use:
jQuery.noConflict();
$('#prizePopup').modal('toggle');
Changing import statement worked. From
import * as $ from 'jquery';
to:
declare var $ : any;
The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave 1 instance of jQuery and your code will work.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
The problem happened to me just in production just because I imported jquery with HTTP and not HTTPS (and production is HTTPS)
Run
npm i @types/jquery
npm install -D @types/bootstrap
in the project to add the jquery types in your Angular Project. After that include
import * as $ from "jquery";
import * as bootstrap from "bootstrap";
in your app.module.ts
Add
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
in your index.html just before the body closing tag.
And if you are running Angular 2-7 include "jquery" in the types field of tsconfig.app.json file.
This will remove all error of 'modal' and '$' in your Angular project.
Source: Stackoverflow.com