Javascript : Ajax and Show/Hide Div

Question

我使用 Ajax 为我的网页请求一些信息，并在 Ajax 运行时弹出“请稍候”窗口。

这在 Mozilla 和 Chrome 中运行良好，但“请稍候”窗口在 IE 中不显示。

这是我的代码:

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 ()"/>

请帮忙，先谢谢了

Answer 1

Sprenna，正如您所提到的，您还可以选择使用 jQuery。如果您想深入阅读，请查看 these three free jQuery books .

如果您想要更简短的介绍，请查看 this list of jQuery tutorials .

但是，简而言之，使用 jQuery 您可以使用此代码来显示/隐藏 HTML 元素:

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

#是一个 ID 选择器。所以 #foo选择其 ID 为 foo 的元素.

然后你可以使用 jQuery offset function相对于文档定位元素。

最后你可以使用 jQuery width和 height函数来设置所需元素的大小。

我还建议您阅读 Pro JavaScript Techniques由jQuery的创建者。它显着提高了您的 JavaScript 知识和技能。