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.

Answer 1

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>

Answer 2

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>

Answer 3

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.

Answer 4

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.