jQuery.dialog() UI glitch in IE9

Question

I implemented a simple jQuery UI (1.9.2) dialog modal that will show a form when the user clicks. It works as expected in all modern browsers. In IE8, it fails. In IE9, it works only after opening developer tools 1 time (ie, pressing F12). Specifically, the dialog will open but it will not close.

For certain, there is a script error that occurs that does not bubble up to the console because I have validation on the form submission that also does not fire. Please advise. I can live with no support for IE8, but the fact that it works for IE9 only after developer tools is opened (even after closing it), is really puzzling me.

Link to code form (3rd page in): https://www.panelistsurvey.com/se/6321D147384607F3

Landing page - just press next

Page 1 - choose yes

Page 2 - choose 1

Page 3 - this is where the modal should appear when you click the cat check box.

function LoadPage() {
    $('html').addClass('hidden');
    var isTestMode = ['%[TestMode]Q11LBL%'].toString().toLowerCase() === 'true';
    var css = $('<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">');
    var force_ie9 = $('<meta http-equiv="x-ua-compatible" content="IE=9" />');
    css.appendTo($('head:first'));
    if ($('html').attr('class').match(/ie9/gi)) {
        force_ie9.appendTo($('head:first'));
    }
    $.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js").done(function(script, textStatus) {
        $('.ncp_img').addClass('edit').css('z-index', '50');

        $('.animal_container').each(function(index, element) {
            var dialog_title = "Cat " + (index + 1).toString();
            var handler = $('.question:first input[id]').filter(function(input_index, input_element) {
                return ToInt($(input_element).attr('id').split('_').pop()) === ToInt(index + 1);
            });
            var edit_button = $('<insert class="edit">Please select to enter information.</insert>');
            var status_icon = $('<insert class="alert"></insert>');
            var not_ready_img = $('<img src="https://www.panelistsurvey.com/static/15.1/images/warning.png" />');
            var ready_img = $('<img class="green-check" src="/AppData/1663160647/Group%20Media/green-check.jpg" />');

            $(element).dialog({
                autoOpen: false,
                modal: true,
                title: dialog_title,
                maxWidth: 450,
                minHeight: 600,
                closeOnEscape: false,
                position: {
                    my: "left top",
                    at: "left top",
                    of: $(window)
                },
                resize: function(event, ui) {
                    return false;
                },
                buttons: [{
                        text: "Save",
                        click: function() {
                            $(element).dialog('close');
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $(element).dialog('close');
                        }
                    }
                ],
                open: function(event, ui) {
                    setTimeout(function() {
                        if (ToInt($('.ui-dialog:visible').length) > 0) {
                            $(".ui-dialog:visible").position({
                                my: "left top",
                                at: "left top",
                                of: $(window)
                            });
                        }
                    }, 50);
                },
                beforeClose: function(event, ui) {
                    var cat_name = $.trim($(element).find('[type="text"]').val()).length > 0;
                    var cat_info = $(element).find('select').filter(function(select_index, select_element) {
                        return $(select_element).val() > 0;
                    }).length === $(element).find('select').length;
                    console.log('Cat name: ' + cat_name);
                    console.log('Cat info: ' + cat_info);
                    if ((cat_name === true) && (cat_info === true)) {
                        $(status_icon).html(ready_img);
                        //return false; 
                    } else {
                        $(status_icon).html(not_ready_img);
                    }
                }
            }); // close dialog setup 

            $(handler).on('change', function(evt) {
                if ($(evt.target).is(':checked')) {
                    $(element).dialog('open');
                }
            }); //close event handler 

            //Force checkbox 
            $(handler).on('change', function(evt) {
                if ($(evt.target).is(':checked') === false) {
                    $(evt.target).closest('.response').addClass('checked');
                    $(evt.target).attr('aria-checked', true).prop('checked', true).change();
                }
            }); //close event handler 

            $(status_icon).html(not_ready_img);

            $(handler).closest('.response').find('label').append(status_icon);
            $(handler).closest('.response').find('label').append(edit_button);

        }); //close iteration 
        $('html').removeClass('hidden');
    }).fail(function(jqxhr, settings, exception) {
        //$( "div.log" ).text( "Triggered ajaxError handler." ); 
    });

} //close LoadPage() 

function ProcessSubmit() {
    var filled_count = $('.green-check').length;
    var input_count = $('[id]').filter(function(index, element) {
        return $(element).attr('id').toLowerCase().match(/_wrapper/gi);
    }).first().find('input[id]').length;

    var cat_name_proxy = $('.cat_name_proxy').closest('.question').find('textarea');
    var name_array = [];
    var input_fields = $('.brand_name').closest('.question').find('[type="text"]').filter(function(text_input, text_element) {
        return $.trim($(text_element).val()).length > 0;
    });
    input_fields.each(function(index, element) {
        name_array.push($(element).val());
        name_array = RandomizeArray(name_array);
    });

    if (name_array.length) {
        $(cat_name_proxy).val(name_array[0].toString());
    }

    console.log('test');

    if (filled_count !== input_count) {
        alert('Please fill in the details for each cat.');
        return false;
    }

} //close ProcessSubmit() 

Answer 1

I discovered the issue again while working on a creating a tool that is built on top of the Bootstrap 3.4.1 carousel plugin. What was happening specifically is that I had some stray console.log lines in my code. IE9 requires a polyfill for console, otherwise it will throw an error. I'm working in an environment that fires off multiple functions in one, in succession, simultaneously such that you will not be able to see exactly where the error occurs, but it will catch it and throw an alert to give you direction. The page would not silently fail (seemingly no JS was loaded) until I loaded the console (F12 Developer tools) in IE9. So my particular issue was consistent with the behavior because console.log only works when you open developer tools in IE9. Once I removed the console.log references, the Bootstrap carousel loaded properly (all JS for that matter loaded properly).

The solution going forward is to simply add in a polyfill to always have console.log define to prevent this issue.

TLDR: The reason why the dialog was not closing was because I had console.log being invoked on close and it was causing a silent error because the console did not exist until it was opened.

See: https://stackoverflow.com/a/15771110/5076162