頁面CSS無法刷新JavaScript函數

Question

我的第一個問題，所以要溫柔:)。

我有這個問題，改變元素的CSS和刷新。我正在用ajax請求創建一個webforms應用程序。我的問題是，當somone從樹形視圖中選擇一個報告時，它應該顯示帶有加載符號的gif，並且在收到數據後應該顯示它。它在Firefox和Opera上運行良好，但不在即，家務或safari上。這裏是代碼：

這是當有人點擊樹節點時啓動的方法 this.hideElements（）; var id = node.getId（）。substr（2）;

var client = new CAjaxClient(); 
var data; 

client.addParameter(new CKeyValuePair('ReportID', id)); 

client.postCallBack('/ajaxpages/Reports.aspx', 'GetReportFilters', this.dataRecieved); 

filterGenerator.setReportID(id); 

此方法hideElements（）

$('#FiltersContainer').css('visibility', 'hidden'); 
$('#ActionsContainer').css('visibility', 'hidden'); 
$('#loadingDiv').css('visibility', 'visible'); 
$("input[id$='Date']").parent().css('visibility', 'hidden'); 

此所述AJAX回發方法

if (this.readyState == 4 && this.status == 200) { 
$('#FiltersContainer').css('visibility', 'visible'); 
$('#ActionsContainer').css('visibility', 'visible'); 
$('#loadingDiv').css('visibility', 'hidden'); 
var data = eval(this.responseText); 
filterGenerator.processFiltersData(data); 

數據和其中所有的順序返回它只是在請求時間的瀏覽器是等凍結，並且當數據返回css狀態時，就是在整個過程結束時。加載div從不顯示。我也嘗試強制重新繪製domelement.style改變，但沒有效果。當我在Chrome調試器中一行一行地執行代碼時，一切都完美無缺。如果可以的話請幫忙。

HTML代碼（VIO：TreeView的是我們自己的ASP控制）：

<div id="pageHeader" style="display:inline-block"> 

     <div id="headerImageDiv" style="float:left; margin-left:15px; margin-top:5px;"> 
      <img src="style/default/printerLarge.png" alt="" /> 
     </div> 

     <div id="pageTitleDiv" style="float:left"> 
      <span style="display:block; margin-top:20px;margin-left:10px;color:#78b4bb; font-size:20px;">Reports And Analyses</span> 
      <span style="display:block; margin-top:20px;margin-left:10px;font-size:18px;">Select a report</span> 
     </div> 

    </div> 
    <br /> 
    <div id="mainPane" style="display:inline-block;width:100%;"> 
     <div id="readerTreeContainer" style="float:left;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right:none; border-width:1px; overflow : auto;width:300px;height:auto; background-color:white;"> 
      <vio:TreeView ID="TreeView" runat="server" 
        Width="298" Height="500" 
        ActionListener="ReportsGeneralListener" 
        ActionListenerScript="ReportsGeneralTree.js" 
        GlobalTreeviewName="reportsTreeview"> 
      </vio:TreeView> 

     </div> 

     <div id="FiltersContainer" style="position:relative;visibility:hidden;float:left;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left:solid 1px; border-width:2px; overflow : auto;width:30%;height:500px; background-color:#dbdae4;"> 
      <div id="filterColumnOne" style="float:left;width:50%;height:100%;border-right:solid 1px;border-left:none;"> 

      </div> 
       <div id="filterColumnTwo" style="float:left;width:49%;height:100%;"> 
      </div> 
      <div id="loadingDiv" style="z-index:10;position:absolute;top:50%;left:50%;margin: -35% 0 0 -35%;z-index:100001;height:316px;width:396px;"> 
       <div style="position:relative;display:block"> 
        <img src="style/default/loading.gif" alt="" style="position:absolute;left:0px;top:0px;z-index:-1;"/> 
        <span style="display:block;text-align:center;padding-top:80px;font-size:25px;font-weight:bold;">Loading Report</span> 
       </div> 
      </div> 
     </div> 

     <div id="ActionsContainer" style="visibility:hidden;float:left;border-left-style:none;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-width:2px; overflow : auto;width:200px;height:200px; background-color:#abe9e7;"> 
       <div style="display:block;border-bottom:solid 1px;height:50%"> 
        <div style="position:relative; height:100%;"> 
         <div style="position:absolute;top:50%;left:50%; height:72px;margin: -35px 0 0 -35%;"> 
          <img src="style/default/document.png" alt="" style="float:left;margin-right:10px;"/> 
          <button type="button" style="margin-top:18%;height:30px;" onclick="print();">Print</button> 
         </div> 
        </div> 

       </div> 

       <div style="display:block;border:none;height:49%;"> 
        <div style="position:relative; height:100%;"> 
         <div style="position:absolute;top:50%;left:50%; height:72px;margin: -35px 0 0 -35%;"> 
          <img src="style/default/application_pdf.png" alt="" style="float:left;margin-right:10px;height:72px;"/> 
          <button type="button" style="margin-top:18%;height:30px;">PDF</button> 
         </div> 
        </div> 
       </div> 
     </div> 

    </div> 

Answer 1

嘗試.hide和.show代替。他們工作跨瀏覽器。

見jQuery API

我覺得你的問題是：

<div stuff I'm hiding> 
    <div loading screen> 

爲你提供了什麼的工作演示見here。我刪除了內聯可見性：隱藏的樣式（我建議你分裂成一個CSS文件，它使它不可讀），並從你隱藏的div內加載div。