单击按钮后加载指示器

我想在用户点击执行多个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

我使用上述连接解决方案时，出现以下错误： enter image description here

**这似乎这样的伎俩

code

<script type="text/javascript" language="javascript"> 
function ShowDiv() 
    $('#updatediv').show() } 
</script>

code

enter image description here

来源

2012-04-12 Blake

请向我们显示您的代码。 – SLaks 2012-04-12 14:22:01

你需要显示代码才能在这里获得帮助。否则，它在黑暗中拍摄，并没有表明你实际上已经尝试过任何东西。 – RogueSpear00 2012-04-12 14:22:57

@布莱克 - 对于需要使用ajax的更新。 – coder 2012-04-12 15:03:13

你必须在客户端上显示的div，而不是服务器端。除了服务器端Click事件之外，ASP按钮还有一个方便的OnClientClick。

这当然是你显示的链接。如果你遵循它，那么它不应该等待完成回发才能执行。

来源

2012-04-12 14:23:38 Servy

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

来源

2012-04-12 14:28:48 coder

如果OP使用UpdatePanel，我喜欢这个解决方案。目前尚不清楚他是否是。 – Servy 2012-04-12 14:30:23

@塞维 - 谢谢你。如果他用或不用，他可能会提及它，但从我们的最终，我已经给他这样做的可能性:) – coder 2012-04-12 14:31:43

这是一个值得发布的好方案，不管OP是否可以使用它;我没有批评你发布它。 – Servy 2012-04-12 14:34:49

单击按钮后加载指示器

回答

相关问题