Question

I use Ajax to request some information for my web page, and pops up a “Please Wait” window while the Ajax is running.

This is working fine in Mozilla and Chrome, but the “Please Wait” window does not show up in IE.

Here is my code :

function openWaitMessage()
{
   var wid = 300;
   var hgt = 200;
   var left = 0;
   var top = 0;

var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
}

var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
}

left = scrOfX + (myWidth - wid)/2;
top =  scrOfY + (myHeight - hgt)/2;


var div = document.getElementById("pleaseWait");
div.style.display = '';
div.style.visibility = 'visible';
div.style.left = left;
div.style.top = top;

 } // openWaitMessage()

   function getInformation { 
       openWaitMessage();

    //////////////////////////////////////////////////////////////////////
    // create a new ListRequest object and add the 'category' parameter //
    //////////////////////////////////////////////////////////////////////
    var listRequest = new ListRequest("lotatt-request");

    /////////////////////////////////////
    // create a new AjaxRequest object //
    /////////////////////////////////////
    var ajaxRequest = new AjaxRequest("/MyProject/services");

    /////////////////////////////////////////
    // send the list request to the server //
    /////////////////////////////////////////
    sendListRequest(ajaxRequest,listRequest,fillLotAtt,ajaxError); 
   }

HTML :

   <div id="pleaseWait" style=" display: none; visibility: hidden;  position:absolute; left:0px; top:0px; width:300px; height:200px; z-Index:999;">
    <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <tr class="dialogHeaderCell" >
            <td>
                Please Wait...
            </td>
        </tr>
        <tr>
            <td align="center">
                <img src="please_wait.gif" alt="Loading...Please wait.">
            </td>
        </tr>
    </table>
</div>

  <input type="button" name="DisplayInfo" class="secondary_button" value="Display Information " onClick="getInformation ()"/>

Please help, Thanks ahead

Answer 1

Sprenna, as you have mentioned you also have the option of using jQuery. If you want some kind of an in-depth read, then have a look at these three free jQuery books.

If you want a shorter introduction, have a look at this list of jQuery tutorials.

However, in short, using jQuery you can use this code to show/hide an HTML element:

$("#pleaseWait").show();
// or
$("#pleaseWait").hide();

# is an ID selector. So #foo selects an element that its ID is is foo.

Then you can use the jQuery offset function to position elements relative to the document.

Finally you can use jQuery width and height functions to set the size of your desired element(s).

I also recommend you to read Pro JavaScript Techniques by the creator of jQuery. It improves your JavaScript knowledge and skills significantly.