Ajax timer not polling when another request is being served
In my form there there is a "Submit Button" and another Timer... Submit button submits a request that may take few minutes to serve..Mean while the timer would poll at short intervals (say 5 secs ) and keep the user updated.. But the issue is that timer stops polling as soon as the Submit button is clicked.. I am attaching the working sample code of the application..Does anyone know why this is happening..Thanks in advance.
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Submit_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" Interval="700" runat="server" OnTick="UpdateTimer_Tick">
</asp:Timer>
</form>
</body>
Code Behind
protected void UpdateTimer_Tick(object sender, EventArgs e)
{
Debug.Write("Timer");
Label1.Text = DateTime.Now.ToString();
}
protected void Submit_Click(object sender, EventArgs e)
{
Debug.Write("Submit Start ");
for (int i = 0; i < 1000; i++)
{
Thread.Sleep(100);
}
Debug.Write("Submit End ");
}
I think the timer is stopped on postback (button-click) and will only start again when that postback returns. One solution to this is to use PageMethods instead of the timer, but you can only make static functions a PageMethod. For the example it would work like this:
[WebMethod()] public static string GetTime(){
Return DateTime.Now.ToString();
}
html and javascript (jquery):
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Submit_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<script type="text/javascript">
function OnSuccess(result, ctrl) { $('#<%=Label1.ClientID %>').html(result); }
function OnError() { alert("error!"); }
$(document).ready(function() {
setInterval(function() { PageMethods.GetTime(OnSuccess, OnError); }, 700)
});
</script>
</form>
</body>
Don't forget to set EnablePageMethods="true" when using webmethods!
While testing this I noticed the response was slower than the SetTimeout triggering a new ajax call, so the page rapidly builds up running connections, this might be because my development server is a bit slow. To fix this you should not update so frequently, once every 5 seconds will have to do.
I guess the asp.net timer already prevents this behavior: it stops when another ajax call is done. This behavior causes the problem you're experiencing, the button postback blocks the timer updates.
加载中,请稍侯......
精彩评论