Modal dialog (showModalDialog()) is not functioning properly in IE9

Question

Scenario : There is an input element in a HTML page where u can enter any numbers/text. If 2 consecutive characters are entered, then I am calling showModalDialog() method to open a pop up window which is having another input element. Whatever the characters entered in parent page will be copied to that search box.

Issue : If user types a text fast(without break) for searching with more than 2 characters (for ex. apple) then 3rd and/or 4th character/s typed are missed out(not traced by keyUp event). I mean only aple word is copied into search box present in pop up. So user need to retype the text.

Solution needed : Whenever user types any text, pop up needs to be triggered and all the characters need to be copied into search box in pop up

Environment : Reproducing only in IE9

Languages : HTML, Javascript

Note : What I have analysed is, since there is a delay in triggering pop up window, characters typed after 2 charaters are missed out. I don't know why this is occuring only in IE9 also I can not upgrade to IE10 for resolving issue.

Still I am stucked up with this issue. Is there any alternative solution for this? Any other way to get all the functionality of modal dialog with some other element/s?

Here is the sample code snippet of parent HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Test Page</title>
    <script type="text/javascript">
    var checkSeq = new RegExp("[a-zA-Z]{2}", "i");
     function handleShowModalPopUp(fieldValue){
        if(checkSeq.test(fieldValue)){
            window.showModalDialog("popUpPage.html", document.getElementById('searchElem').value, "");
        }
     }

    </script>

    </head>
    <body>
        Enter Search Term :  
        <input type="text" id="searchElem" value="" onkeyup="handleShowModalPopUp(this.value)">

    </body>
    </html>

Here is the pop up window HTML (popUpPage.html) :

        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Search Dialog</title>
            <script type="text/javascript">
                function handleOnload(){
                    var searchVal = window.dialogArguments;
                    if(null!= searchVal){
                        document.getElementById('searchElem').value = searchVal;
                    }           
                }
            </script>
        </head>
        <body onload="handleOnload()">
            <input type="text" id="searchElem">
            <input type="button" value="Search">    
        </body>
        </html>

Don't use a modal dialog that requires a whole page (and thus an HTTP request, and thus a delay)? Why not just use a div as a modal popup, such as the ones available in Bootstrap or jQuery UI...or write your own. — Tim M., Jan 03 '13 at 09:29
Thank you. I need to block the user accessing the parent page and also need to block all the events on it (onBlur, onChange...). So I thought modal dialog is a better option. Do we have any other option which works same as modal dialog ? — Sanjeev, Jan 03 '13 at 09:34
You won't be able to get a true modal experience without `showModalDialog()` but you will most likely continue to experience a delay since it loads a new page, especially if there is network latency. A "fake" modal dialog (like [this one](http://twitter.github.com/bootstrap/javascript.html#modals)) doesn't block all events, but is good enough for most purposes. And since you aren't loading a new page, there should be zero latency. It's just another element on the page. — Tim M., Jan 03 '13 at 09:38
Still I am stucked up with this issue. Is there any alternative solution for this? Any other way to get all the functionality of modal dialog with some other element/s? — Sanjeev, Jan 07 '13 at 12:46

Lodewijk Bogaards · Answer 1 · 2013-01-07T21:26:40.953

What you actually want to do is delay the opening of the popup until your user has stopped typing. Detecting if a user has stopped typing is simply a matter of detecting if nothing has happened in the time a keystroke could have happened. So instead of opening the modal window, open it only after a delay on the condition that no keystroke happened in the meantime.

Here is some code I cooked up that should help you. I've set the delay 500ms.

<html>
<head>
<script>
function DelayedPopup(delayThreshold) {
    this.delay = delayThreshold;
    this.lastSearchValue = undefined;
    this.popEvent = 0;
} 

DelayedPopup.prototype = { 
    needsDelay:  function() {
        return this.searchValue() != this.lastSearchValue;
    },

    searchValue: function() {
        return document.getElementById('searchElem').value;
    },

    openPopup: function() {
        window.showModalDialog("popUpPage.html", "");
    },

    popupOrDelay: function() {
        if (this.needsDelay()) {
            this.popup();
        }
        else {
            this.openPopup();
            this.popEvent = 0;
        } 
    },

    popup: function() {
        this.lastSearchValue = this.searchValue();          

        if (this.popEvent) {
            clearInterval(this.popEvent);
        } 

        var self = this;
        this.popEvent = setTimeout(function() { self.popupOrDelay(); }, this.delay);        
    }
};

var delayedPopup = new DelayedPopup(500);
</script>
</head>

<body>
<input type="text" id="searchElem" onkeyup="if (this.value.length > 2) delayedPopup.popup()">
</body>
</html>

Thanks for your help.. :) I already tried this but if user types inconsistently, characters are missed out again. I am not able to understand why this issue is only with IE9. — Sanjeev, Jan 08 '13 at 09:25
I have got much more simpler version for introducing delay in http://stackoverflow.com/questions/10067094/how-does-this-delay-function-works — Sanjeev, Jan 08 '13 at 09:32
@Sanjeev look closer and you will that what you suggest is not a simpler version, it is the exact same version. I've just written it differently to accommodate your requirements. — Lodewijk Bogaards, May 09 '13 at 23:32

Modal dialog (showModalDialog()) is not functioning properly in IE9

1 Answers1