CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapinternet-explorermodal-dialog
ericsicons
ericsicons

Reputation: 1495

Error in IE11 when trying to show a bootstrap Modal via JavaScript

modal.modal('show'); is triggering an error in internet explorer while it is working in all other browsers The Error is Object doesn't support property or method 'modal'

Note:This modal is called by more than one button and it needs to be updated every time which is why I am doing the modal reset.

On a side note, why is it that I have to clone the modal twice to do a modal reset? Is there a better way to do the reset?

var original_model = "";
$(document).ready(function() {
    original_model = $('#my_modal_id').clone();
})

function show_modal(user_photo) {

    //reseting the modal
    $("#my_modal_id").remove();
    var myClone = original_model.clone();
    $("body").append(myClone);

    var modal = $("#my_modal_id");

    modal.find("#photo").attr("src", user_photo);

    // more code to update the modal ...

    // Does not work in IE11 : Error : Object doesn't support property or method 'modal'
    modal.modal('show');
}

Upvotes: 1

Views: 6551

Answers (2)

Roman
Roman

Reputation: 21765

In case you use compilation for your project (with webpack, for example), you might consider to install the current polyfill package, that provides ES5 compatibility 

npm i --save core-js

or 

yarn add core-js

Then to add at the top of your entry point of your project

import 'core-js'

At the moment core-js polyfill library is the easiest way to make Cross Browser Support

Upvotes: 0

taco
taco

Reputation: 1373

Try adding this code to your show_modal() function after the var modal declaration:

if ($.browser.version > 9){
    modal.removeClass('fade');
}

This would require the download of the jQuery migrate plugin

Upvotes: 2

Related Questions