CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modaldurandal-2.0
jbgarr
jbgarr

Reputation: 1398

Bootstrap modal not showing in IE11 unless dev tools are open

I have a single page application created with Durandal.js and I'm having a heck of a time debugging an issue with IE11 and Durandal's app.showMessage(...) and app.showDialog(...) methods. Currently the app runs fine in Chrome, FireFox and IE 9 and 10, but in IE11 I am running into an issue where my app hangs when trying to call up a dialog via app.showDialog(...). If I open the dev tools before going to my app it all runs just fine. If I try to go to the app, run the code that results in app.showDialog firing and THEN open the dev tools and try to run that same code I do get access to the error that is occurring, but it's not very helpful. The actual error reads as SCRIPT5007: Unable to get property 'name' of undefined or null reference and it's at File: system.js, Line: 90, Column: 13. The code from that area of system.js relates to Durandal's logError method which looks like this:

var logError = function(error) {
    if(error instanceof Error){
        throw error;
    }
    throw new Error(error);
};

The error stack appears as included in the attached image (located at the bottom of my question). Sorry I had to use an alert to get the full error stack since otherwise the logged version is cutoff.

I have also tried a few things including ensuring my doctype is correctly decalred with <!DOCTYPE html> at the top of my index.html file, I have added <meta http-equiv="X-UA-Compatible" content="IE=edge"> to index.html and I have also tried to add my own console object to catch any debug code that may still be in the app via the following script that I found here: https://stackoverflow.com/a/12307201/4367226 

<script type="text/javascript">
    // IE9 fix
    if(!window.console) {
        alert("There isn't a console!");
        var console = {
            log: function( x ){},
            warn: function( x ){},
            error: function( err ){
                alert( "Error from console object:" );
                alert( err );
                alert( err.stack );
            },
            time: function(){},
            timeEnd: function(){}
        };
    }
</script>

I've also ensured that the app has a "cache buster" (related to https://stackoverflow.com/a/25170531/4367226) by adding

$.ajaxSetup({cache:false});

to my app.

I have also tried to remove the fade class from my modals without success (as suggested here: https://stackoverflow.com/a/25717025/4367226).

Further details - the app is running Durandal 2.0.1, Twitter Bootstrap 2.3.2 and jQuery 1.10.2.

Any help would be much appreciated and let me know if I can help clarify anything.

Update

After further investigation and debugging I have been able to find the offending line of code in the bootstrap-modalmanager.js file's init method and it is jQuery related (so I added that tag back to my question):

init: function (element, options) {
        this.$element = $(element);
        this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
        this.stack = [];
        this.backdropCount = 0;

        if (this.options.resize) {
            var resizeTimeout,
                that = this;

            $(window).on('resize.modal', function(){
                resizeTimeout && clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(function(){
                    for (var i = 0; i < that.stack.length; i++){
                        that.stack[i].isShown && that.stack[i].layout();
                    }
                }, 10);
            });
        }
    },

In the line that reads this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options); from above the this.$element.data() bit seems to be blowing things up. That is where the error is coming from, but I have no idea why it would work with dev tools open, but throws an error otherwise.

Update 2

After continued digging I found that jQuery 1.10.2's jQuery.fn.extend function is broken. The function would try to iterate over an element's attributes and this part of the code: name = attrs[i].name; would allow the code to try and access name of a (sometimes in IE11) null or undefined value - hence the error that I was seeing. That code has been fixed in jQuery 1.11.3 (and it even references the fact that sometimes IE11 the attrs element can be null in the code), but unfortunately the upgraded version breaks other things in my app, so I have replaced the jQuery 1.10.2's jQuery.fn.extend function with version 1.11.3's function of the same name.

error callstack

Upvotes: 2

Views: 2223

Answers (1)

jbgarr
jbgarr

Reputation: 1398

So after many, many hours of debugging I have found the cause of my issue. It's related to jQuery 1.10.2's jQuery.data function. In that function there is a for loop that iterates over an element's attributes and tries to access .name of a (sometimes in IE11) null or undefined value.

That bug was fixed in jQuery 1.11.3's version of jQuery.data, but unfortunately I couldn't use the full upgraded version of jQuery without breaking other parts of the app. Instead I simply replaced jQuery 1.10.2's jQuery.data function with the updated version from jQuery 1.11.3.

This is not the best solution (I would rather not have to hack the core of jQuery and have Frankenstein code in my app), but it works.

I'm also still puzzled as to why my old code worked fine in IE11 with the dev tools open, but would fail otherwise. Maybe dev tools adds something to the body element's attributes that prevented the error from happening?

Upvotes: 2

Related Questions