-
-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bootstrap methods not working #105
Comments
Have you tried adding Bootstrap 5.0.0 Beta 2 JS for IE11? <script nomodule src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> |
I've tried changing the code to re-add the Bootstrap beta back in but still get the same 'Object doesn't support property or method 'modal' error: <!-- Fix for IE11 -->
<link rel="stylesheet" href="css/external/manual/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
<script nomodule crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"></script>
<script nomodule>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');</script>
<!-- Fix for IE11 --> I've just come up with a workaround in the meantime: function AMmodal(eleID, action){
if (typeof $().modal == "undefined"){ // Fix for IE11
if(action == "show"){
$(eleID).addClass("show");
}else if(action == "hide"){
$(eleID).removeClass("show");
}else if(action !== "dispose"){
console.log("Error in AMmodal - unrecognised action");
}
}else{
$(eleID).modal(action);
}
}
// Usage Example
AMmodal('#mymessage',"show"); // replaces $('#mymessage').modal('show'); |
@davidhill001 There's an issue with your set up. These are my imports (function () {
//local version of same dependencies
document.write(
'<link rel="stylesheet" href="css/bootstrap-ie11.min.css">'
+ '<script src="js/ie11CustomProperties.min.js"><\/script>'
+ '<script src="js/elementQsaScope.min.js"><\/script>'
+ '<script src="js/polyfill.js"><\/script>'
);
})(); Right before <!--boilerplate code from docs-->
<div class="modal" tabindex="-1" id="mymessage">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
var myModal = new bootstrap.Modal(document.getElementById('mymessage'));
myModal.show();
</script>
</body> This runs without issue (with Bootstrap v5.0.0-beta2) |
thanks @JMHeartley ! I'll close this issue now then. |
Hi
I have added your code to my page as well as loading the latest version of Bootstrap using Require.JS and most things seem to be working great in IE11 now (thank you!). The only issue I have at the moment is that Bootstrap methods don't seem to be working. I am using jQuery which are still supported by Bootstrap but have also tried the vanilla JS methods but still not working.
For example, showing modals, I have a JS function that performs an AJAX request to get some data which is then shown in a modal.
At the moment it uses:
$('#mymessage').modal('show');
but it says: Object doesn't support property or method 'modal'.
The vanilla JS method I tried is:
but it says 'bootstrap' is undefined.
The code I have added to support IE11 is:
The text was updated successfully, but these errors were encountered: