单击按钮后加载指示器
问题描述:
我想在用户点击执行多个SQL查询的按钮后显示加载指示器。我尝试在按钮单击时取消隐藏div,但在按钮后面的所有工作完成之前不会显示。我也试过这个解决方案没有成功 - http://forums.asp.net/t/1608046.aspx/1单击按钮后加载指示器
有什么建议吗?
code
<asp:Button ID="loadButton" OnClientClick="ShowDiv()" runat="server"
onclick="loadButton_Click" Text="Go" />
<script type="text/javascript">
function ShowDiv()
{setTimeout('document.getElementById("updatediv").style.display = "inline";', 500);}}
</script>
<div ID="updatediv" runat="server" >
<img src="Images/ajax-loader.gif" /> Updating ....
</div>
code
我使用上述连接解决方案时,出现以下错误:
**这似乎这样的伎俩
code
<script type="text/javascript" language="javascript">
function ShowDiv()
$('#updatediv').show() }
</script>
code
答
你必须在客户端上显示的div,而不是服务器端。除了服务器端Click
事件之外,ASP按钮还有一个方便的OnClientClick
。
这当然是你显示的链接。如果你遵循它,那么它不应该等待完成回发才能执行。
答
CSS:
<style type="text/css">
#UpdateProgress1 {
top:450px; left: 450px;
position: absolute;
background-color: #C3E1FF;
background-repeat: repeat-x; }
</style>
添加scriptMananger,UpdatePanel中,如下所示:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table runat="server" border="1" width="98%" align="center">
<tr><td></td></tr>
</table>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="Images/Loading.gif" /><br /><center><font color=red>Processing Data...</font></center>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnprocess" />
</Triggers>
</asp:UpdatePanel>
然后给予一定的计时器
System.Threading.Thread.Sleep(3000);
如果您使用简单的jQuery,你需要做的阿贾克斯的方式,这里是你应该如何处理阿贾克斯:
$('#ShowDiv')
.hide() // hide
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
请向我们显示您的代码。 – SLaks 2012-04-12 14:22:01
你需要显示代码才能在这里获得帮助。否则,它在黑暗中拍摄,并没有表明你实际上已经尝试过任何东西。 – RogueSpear00 2012-04-12 14:22:57
@布莱克 - 对于需要使用ajax的更新。 – coder 2012-04-12 15:03:13