jQuery dialog box not capturing control - IE 9.0

Question

I have a CSS sucker fish side-menu on my page. When the user clicks on an item in the page, I'm popping up a jQuery UI dialog box and inside a div on the page I am loading an HTML page through jQuery AJAX.

In Chrome the focus shifts away from the menu and onto the jQuery UI dialog box whenever I click on an item on the menu.

But in IE and Opera the focus remains on the menu even after I have clicked on the item. The jQuery UI dialog box is unable to shift the focus away from the menu hence it remains open and obstructs the view of the user.

Please take a look at the attached image.

enter image description here

As you can see I even added an text-box and grabbed the focus there, but even so there is no change.

As requested, here is a link to the website.

Example: When you open the website in IE 9, and you click on say Technologies > MySQL or Technologies > MSSQL, the menu doesn't close, but it should because I'm opening up a modal dialog while loading the page behind in the div. But if you open the page in chrome, and try the same thing, the menu closes, as it should. Attaching relevant code snippets:-

/**********************************************
Function to load an html page inside a div
**********************************************/
function loadPageInDiv(containerDiv, pageToLoad, divToLoadIn, loadingDialog, callBackFunction) {
    var parentDiv = $("#" + containerDiv);
    var loadDiv = $("#" + divToLoadIn);
    var dialogBox = $("#" + loadingDialog);
    // Show dialog box first, then fadeOut, then load, then fadeIn,the close.
    $(dialogBox).data('loadDiv', loadDiv).dialog("open");
    $(loadDiv).load(pageToLoad, function (response, status, xhr) {
        if (response == "error") {
            $(dialogBox).dialog('close');
        }
        else {
            if (callBackFunction != null) {
                callBackFunction();
            }            
            checkAndDisplay(loadingDialog, divToLoadIn);
        }
    });
}

Function to initialize the jquery-ui dialog box.

/**************************************
Function to initialize the dialog box
*****************************************/
function initializePleaseWaitDialog() {
    $("#osmPleaseWait").dialog({
        autoOpen: false,
        modal: true,
        dialogClass: 'noTitleDialog',
        draggable: false,
        resizable: false
    });
}

Function to toggle DIV display

/***************************************
Function to toggle div display
****************************************/
function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + divToShow).css('display', 'block');
    $("#" + dialogToHide).dialog("close");
}

UPDATE #3: I tried another way, On the click event of the menu items, I am hiding all the secondary divs.

        $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function () {
            // Currently Selected
            $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
            $(this).addClass("osmServiceListSelected");
            // Hiding the div**
            $(".secondaryMenuContainer").css('display', 'none');
            var pageToLoad = $(this).children("input[type='hidden']").val();
            loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
            return false;
        });

I have then updated the code in checkAndDisplay, to remove the display attribute I added earlier, but it still doesn't work.

function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + dialogToHide).dialog("close");
    $("#" + divToShow).css('display', 'block');
    $(".secondaryMenuContainer").css('display', '');
}

HERE is the markup for the page.

<div class="osmListContainerSpecial">
            <div class="osmListHeader" id="osmListHeaderServices">
                Our Services
            </div>
            <div class="mainCatHeader">
                Software Development
            </div>
            <%-- Technologies --%>
            <div class="secondCatHeader">
                Technologies
                <div class="secondaryMenuContainer" id="softwareDevTech">
                    <div class="secondaryMenu" style="COLOR: #3e3e3e" id="techMenu">
                        <div class="osmMenuObject">
                            .NET/ C#
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techCSharp.html" />
                            <div class="shortMenuDesc">
                                Our primary area of expertise, with over 5 years of experience.</div>
                        </div>
                        <div class="osmMenuObject">
                            MS-SQL
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMsSQL.html" />
                            <div class="shortMenuDesc">
                                We have been working with SQL for over 6 years now.</div>
                        </div>
                        <div class="osmMenuObject">
                            MySQL
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMySQL.html" />
                            <div class="shortMenuDesc">
                                Open Source Database for faster, hassle-free deployment.</div>
                        </div>
                        <div class="osmMenuObject">
                            Silverlight
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techSilverlight.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            MVC
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMVC.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Azure
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techAzure.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
            <%-- Applications --%>
            <div class="secondCatHeader">
                Applications
                <div class="secondaryMenuContainer" id="softwareDevApp">
                    <div class="secondaryMenu">
                        <div id="appMsCRM" class="osmMenuObject">
                            Microsoft CRM
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appMsCRM.html" />
                            <div class="shortMenuDesc">
                                Our primary area of expertise, with over 5 years of experience.</div>
                        </div>
                        <div id="appQb" class="osmMenuObject">
                            QuickBooks
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appQb.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appGP" class="osmMenuObject">
                            Great Plains
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appGp.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appSP" class="osmMenuObject">
                            Sharepoint
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSp.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appXero" class="osmMenuObject">
                            Xero
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appXero.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appFB" class="osmMenuObject">
                            Freshbooks
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appFb.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appSF" class="osmMenuObject">
                            SalesForce
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSF.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appNav" class="osmMenuObject">
                            Navision
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appNavision.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
            <%-- Independent Software Testing --%>
            <div class="mainCatHeaderWithoutChild">
                Independent Software Testing
                <input type="hidden" value="ServicesHTML/Testing.html" />
            </div>
            <%-- Technnical Documentation --%>
            <div class="mainCatHeaderWithoutChild">
                Technnical Documentation
                <input type="hidden" value="ServicesHTML/Documentation.html" />
            </div>
            <%-- Case Studies --%>
            <div class="mainCatHeaderWithChild">
                Case Studies
                <div class="secondaryMenuContainer">
                    <div class="secondaryMenu" style="COLOR: #3e3e3e">
                        <div class="osmMenuObject">
                            Media - Astral
                            <input type="hidden" value="ServicesHTML/CaseStudies/csAstral.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Waste Disposal - RGMRM
                            <input type="hidden" value="ServicesHTML/CaseStudies/csRGMRM.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Insurance - IAAH
                            <input type="hidden" value="ServicesHTML/CaseStudies/csIAAH.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Housing Providers - TalonPro
                            <input type="hidden" value="ServicesHTML/CaseStudies/csTalonPro.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Education and Training - Met Film
                            <input type="hidden" value="ServicesHTML/CaseStudies/csMetFilm.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Industry - Bates
                            <input type="hidden" value="ServicesHTML/CaseStudies/csBates.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Industry - Atdec
                            <input type="hidden" value="ServicesHTML/CaseStudies/csAtdec.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Please let me know if you need any other code, or have any other queries.

How are we supposed to help you, using photoshop? I mean, could you provide some relevant code? Maybe set a jsfiddle to reproduce your issue or maybe a link to see what's going on. — A. Wolff, Jun 01 '13 at 12:04
Maybe you could tell us how to reproduce your bug? I've tested on IE9 emulated under IE10 and cannot see any bug but still i'm not sure how to reproduce the bug you are talking about — A. Wolff, Jun 01 '13 at 12:57
@roased When you open the website in IE 9, and you click on say Technologies > MySQL or Technologies > MSSQL, the menu doesn't close, but it should because I'm opening up a modal dialog while loading the page behind in the div. But if you open the page in chrome, and try the same thing, the menu closes, as it should. — Abijeet Patro, Jun 01 '13 at 13:00
I'm sorry for me dialog close. And don't have a true version of IE9 so i cannot help you more — A. Wolff, Jun 01 '13 at 13:09
I've provided all the necessary links and description, why is the question still getting downvoted? — Abijeet Patro, Jun 01 '13 at 13:15
Downvoters may think your post is missing relevant code which is true. — A. Wolff, Jun 01 '13 at 13:19
This is really nicely improved question but still for me under IE9 emulated mode, i cannot reproduce your issue — A. Wolff, Jun 10 '13 at 12:19
Could you possibly recreate the problem using [jsfiddle.net](http://jsfiddle.net)? — Dom, Jun 12 '13 at 19:58

pkExec · Answer 1 · 2013-06-16T08:03:27.190

3

It appears to be a racing condition. I'm not sure about the "why" part, but this seems to overcome the problem:

Replace your checkAndDisplay function with the following version:

function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + divToShow).css('display', 'block');
    setTimeout(function(){
        $("#" + dialogToHide).dialog("close");
    },500);
}

Edit: Seems there is a bug with Internet Explorer not refreshing the "hover" state, except on mouse move. Here is a reproducable sample. Try clicking on the green area in different browsers and NOT move the mouse. http://jsfiddle.net/5LR8Z/

I didn't find any solution for that particular bug. As a workaround, I would try manually closing the menu (set a variable on the click handler to know which menu to close on your checkAndDisplay function).

edited Jun 16 '13 at 08:03

answered Jun 12 '13 at 20:34

pkExec

1,752
1
20
39

1

I had tried this before, if you add this code and then click on the mouse, and **DO NOT MOVE** your mouse even a bit, the menu will remain open. It's not the most reliable solution. Thanks though. – Abijeet Patro Jun 15 '13 at 07:02
Check my edit. Thanks for your question, I wasn't aware of that particular bug. – pkExec Jun 16 '13 at 08:04
Check my answer below, I'm using simpler version of your suggestion, that seems to be working. – Abijeet Patro Jun 17 '13 at 05:05

score 2 · Accepted Answer · answered Jun 17 '13 at 04:45

Okay since there hasn't been a proper workaround. Here's what I did to circumvent problem. Some may think that it's slightly hack-y but I couldn't find any other solution.

If you check my 3rd update I am hiding the secondary menu,

        $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function () {
            // Currently Selected
            $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
            $(this).addClass("osmServiceListSelected");
            // Hiding the div || THIS WAS NEW
            $(".secondaryMenuContainer").css('display', 'none');
            var pageToLoad = $(this).children("input[type='hidden']").val();
            loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
            return false;
        });

Now in the document.ready() event itself, I'm adding another event.

        $(".secondCatHeader,.mainCatHeaderWithChild").hover(function () {      
            $(this).children(".secondaryMenuContainer").css('display', '');
        })

Now what this will do is, whenever we hover over one of the menu items, and it has a children with the class .secondaryMenuContainer, it'll clear the inline display from that class. So the display:none that I had set earlier will be cleared. I've tested this with IE 9.0 and Opera, and it seems to be working properly.

Thanks everyone.

Rune · Answer 3 · 2013-06-10T14:37:36.777

From what I can tell, you have a CSS conflict between line 1101 and line 1109. You've set .secondaryMenuContainer to DISPLAY: none; but then set it to DISPLAY: block; upon .secondCatHeader:hover;

The jQuery UI dialog box doesn't negate the hover condition, and so your .secondaryMenuContainer never reverts to DISPLAY: none;

$(".secondaryMenuContainer").css('display', ''); didn't work because it sets an invalid inline style, so the browser reverts to displaying a valid external style, in this case DISPLAY: block; since the user's hover is still unbroken. If you want the .secondaryMenuContainer to simply cascade back to its DISPLAY: none; state you will have to break the user's hover.

One method would be to create an empty div when your Dialog Box loads; one with a z-index higher than your .secondaryMenuContainer that occupies the entire window. You would then remove that div when the Dialog Box fades out. That should break the user's hover and allow the div's style to cascade back to DISPLAY: none;

EDIT: Since this is jQuery UI that modal box should be loading a .ui-widget-overlay which does exactly what I've described. The function is being called in the stack at e.widget._createOverlay @jquery-ui-1.10.1.custom.min.js:6 but it's not stopping page interaction the way it's supposed to.

Yes, exactly my point, since I'm already displaying the modal dialog box, it should take the focus away from the menu. That's not happening. Btw `.css('display', '');` is not illegal, check the following link. http://stackoverflow.com/questions/2465158/is-it-possible-to-remove-inline-styles-with-jquery — Abijeet Patro, Jun 11 '13 at 04:53

jQuery dialog box not capturing control - IE 9.0

3 Answers3