Bootstrap methods not working

[David Hill]

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:

var myModal = new bootstrap.Modal(document.getElementById('mymessage'));
myModal.show();

but it says 'bootstrap' is undefined.

The code I have added to support IE11 is:

<!-- 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/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');</script>
<!-- Fix for IE11 -->

[Christian Oliff]

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>

[David Hill]

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');