Just joined and this is my first question, so please go easy :).

I've encountered a problem with changing the CSS of elements and their refresh. I'm working on a webforms application with AJAX requests. The issue I'm facing is that when someone selects a report from a tree view, it should display a loading gif and then show the data once it's received. Everything works fine on Firefox and Opera, but not on IE, Chrome, or Safari. Here's the code snippet:

This is the method that runs when a tree node is clicked 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);

This is the hideElements() method

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

This is the AJAX postBack method

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);

The data is returned correctly, it's just during the request time, the browser seems frozen and when the data returns, the CSS state is at the end of the process. The loading div is never shown. I've tried forcing a redraw with domelement.style changes, but it had no effect. When I execute the code in Chrome debugger line by line, everything works perfectly. Any help would be appreciated.

Here's the HTML code snippet (vio: TreeView is our own ASP control):

<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>