Timer triggering update panel update causing loss of focus

Question

I have made a clock to show current time with an ajax timer in an ajax update panel. The timer is set to one minute firing the tick event which puts the present time in a label. There are a number of text boxes on the page and when the clock updates the curser jumps to the default focused control and the page jumps to the top. This makes it difficult to fill the form without interuption. How can I maintain control focus and scroll position? I found an answer here Maintaining focus on ajax update panel after updating form but it's using javascript without full code (psuedo code as he wrote). I'm weak at javascript so can someone give me a more detailed solution or another alternative? Thank you.

Edit: Is there not a simple way to find which control has focus at postback time and reset focus to that control when the page reloads? Preferably in c# and if not in javascript.

Are you using one update panel in which both timer and form with textbox?If so use separate update panel for timer label and one more for the form. — sathishkumar, Jan 25 '12 at 09:51
@sathishkumar I have only one update panel but only the the timer and label receiving the time are in it. The rest of the form is not in an update panel at all. — Dov Miller, Jan 25 '12 at 09:59
why don't make use of javascript timer so that there will be no postback effect ... — Madhu Beela, Jan 25 '12 at 10:09
@Madhu Can you show me how? As I wrote I'm weak at javascript. — Dov Miller, Jan 25 '12 at 10:28
here is the link that will help you out [try this](http://www.dynamicdrive.com/dynamicindex6/localtime.htm) — Madhu Beela, Jan 25 '12 at 10:53
@Madhu thank you for that link. I tried it but it didn't work. I think the reason is that it works for php ssi and asp apparently classic asp but not ASP.NET which I'm using. — Dov Miller, Jan 31 '12 at 10:09

score 0 · Answer 1 · answered Dec 21 '12 at 21:33

Your update panel has a ContentTemplate but check to see if you have the with AsyncPostBackTrigger

<asp:UpdatePanel ID="updatepanel1" runat="server">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="tmrUpdate" EventName="Tick" />
  </Triggers>
  <ContentTemplate>
    <div>content updating</div>
  </ContentTemplate>
</asp:UpdatePanel>

score 0 · Answer 2 · edited May 23 '17 at 10:25

Putting this code after your script manager will also solve the problem globally. I just tested this works great.

<script type="text/javascript">
    try 
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function beginRequest() {
            prm._scrollPosition = null;
        }
        prm.add_beginRequest(beginRequest);


    }
    catch (err) {
        alert(err);
    }
</script>

As seen here

Here is the code I tested it with. I just made timer update an empty update panel every 100ms so that it is easy to see the problem. If you comment out the <script type="text/javascript">....<script> below the script manager, you'll see the before and afters that it is nearly impossible to scroll down the page in some browsers!

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
 <asp:ScriptManager ID="ScriptManager1" runat="server" />

<script type="text/javascript">
    try 
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function beginRequest() {
            prm._scrollPosition = null;
        }
        prm.add_beginRequest(beginRequest);


    }
    catch (err) {
        alert(err);
    }
</script>


        <asp:Timer ID="Timer1" Interval="100" runat="server" />
        <asp:UpdatePanel ID="up1" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>

            </ContentTemplate>
        </asp:UpdatePanel>

<br /><br />
        <div style="min-height:2000px"></div>


</asp:Content>

score 0 · Answer 3 · answered Jan 31 '12 at 10:30

My main problem was losing focus from text boxes in the middle of writting when the clock ticks. I have two text boxes so in the tick event in code behind I checked, if the first one has text and the second doesn't I know that focus should be in the first so I give it Focus() and if there's text in the second text box that means focus should be there. This is the code:

if (!string.IsNullOrEmpty(txtSolution.Text) && string.IsNullOrEmpty(txtRemarks.Text))
        {
            txtSolution.Focus();
        }
        else if (!string.IsNullOrEmpty(txtRemarks.Text))
        {
            txtRemarks.Focus();
        }

This solved both the loss of focus of the cursor and the scroll position jump. Problem: If the user finished writing in the first text box and moved to the second one but didn't start writting yet it will jump back to the first. Or if he moved back from the second back to the first there will be a jump to the second. Otherwise it works fine.

score 0 · Accepted Answer · answered Feb 12 '12 at 13:28

I found that the problem occurred only on pages where I set the focus by code like txtBox.Focus(), but pages where I didn't set focus by code there's no problem. So I tried putting the Focus() command in an if not postback condition.

if(!isPostback)
{
   txtBox.Focus();
}

That solved all the problem.

Timer triggering update panel update causing loss of focus

4 Answers4