我的第一个问题,所以要温柔:)。页面CSS无法刷新JavaScript函数
我有这个问题,改变元素的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>
试过了,效果是一样的 – Rhinox
也许分享你的HTML资源或发表一个jsfiddle? –
张贴的HTML代码,从未使用jsfiddle所以不真的知道如何使用它,我不知道我是否可以因为我在ASP.NET应用程序工作 – Rhinox