Javascript：Ajax和Show/Hide Div

我使用Ajax爲我的網頁請求一些信息，並在Ajax運行時彈出一個「Please Wait」窗口。Javascript：Ajax和Show/Hide Div

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

請幫幫忙，謝謝你的設置提前left和top當編程

來源

2012-02-27 Ianthe

'// IE 4 compatible'好神，有必要嗎？ – Chad 2012-02-27 03:08:56

也許它是屏幕外的？您是否使用IE開發工具檢查了div的左側屬性和頂端屬性？ – bfavaretto 2012-02-27 03:32:05

我該怎麼做？你能指導我嗎？我已安裝IE開發工具，但不知道如何使用它 – Ianthe 2012-02-27 03:34:05

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函數來設置所需元素的大小。

我還建議您閱讀jQuery創建者的Pro JavaScript Techniques。它顯着提高了您的JavaScript知識和技能。

來源

2012-02-27 22:05:23 Behrang

一個可能的原因是沒有附加的CSS單位。試試這個：

div.style.left = left + 'px'; 
div.style.top = top + 'px';

我創建了this jsfiddle所以我們可以玩你的代碼。

來源

2012-02-27 15:19:45 bfavaretto

Javascript：Ajax和Show/Hide Div

回答

相關問題