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

Question

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

http://jsfiddle.net/79ov9agq/5/ strange it seems to be working on jsfiddle but it wont on my live site, I am using BS version 3.0 on my site not sure it that has anything to do with it — ericsicons, Sep 08 '14 at 03:05
You might also want to try renaming it from `modal` to something else. — taco, Sep 08 '14 at 03:14

score 2 · Accepted Answer · edited Aug 17 '15 at 16:02

2

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

edited Aug 17 '15 at 16:02

atw

5,428
10
39
63

answered Sep 08 '14 at 03:21

taco

1,367
17
32

Now I am getting a new error Unable to get property 'version' of undefined or null reference. I am using the latest Jquery and it has to be working because I am using it to make ajax calls and it is working in IE – ericsicons Sep 08 '14 at 03:31
That's odd. See http://api.jquery.com/jquery.browser/#jQuery-browser-version2 It should work – taco Sep 08 '14 at 03:38
I've updated my answer. It looks like this would require using the jQuery migrate plugin. – taco Sep 08 '14 at 03:40
1

Its fine now, something was wrong in IE I just did a rest original settings in advanced tab it and works now. IE = crap browser – ericsicons Sep 08 '14 at 03:52
2

You probably had IE in compatability mode. – taco Sep 08 '14 at 04:00
Probably, but it still strange why the exact same code was working on fiddle and not the site. In any case thanks for your help ;) – ericsicons Sep 08 '14 at 11:51

score 0 · Answer 2 · answered Oct 25 '19 at 18:24

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

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

2 Answers2

Linked