无序关闭模式jQuery对话框会导致IE错误

Question

As part of dropping support for older browsers, I recently updated an ASP.NET app to jQuery 3.1.1 and jQuery UI 1.12.1. After this, I noticed that I was getting errors logged to the console in IE 11.

The error is as follows:

 SCRIPT5007: Unable to get property '_focusTabbable' of undefined or null reference jquery-ui.js, line 12794 character 7 

I was able to track the problem to the fact that long-running calls (eg database query that may take 2-3 seconds) open a 'Please Wait' modal dialog. This dialog is closed after a content dialog is opened and populated. When the content dialog is closed, the above error occurs.

I was able to condense the issue into the following JSFiddle: https://jsfiddle.net/qaf1ut4b/8/

What do I need to do to be able to have a wait dialog open until after the content dialog is opened and populated? Closing the wait dialog first solves the problem, but isn't sufficient as the content dialog can take a long time to populate, due to large numbers of <option> elements being loaded into the DOM after the database query completes.

Answer 1

If you are OK with destroying the modals when you close them you can use this:

$('#wait-dialog').dialog({
        autoOpen: false,
        height: 88,
        width: 250,
        modal: true,
        title: 'Please Wait',
        close: function (event, ui) {
            $(this).dialog('destroy');
        },
        open: function () { }
    });

$('#content-dialog').dialog({
        autoOpen: false,
        height: 188,
        width: 350,
        modal: true,
        title: 'I Am Some Content',
        close: function (event, ui) {
            $(this).dialog('destroy');
        },
        open: function () { }
    });

Here is the fix to your jsfiddle:
https://jsfiddle.net/qaf1ut4b/9/