ASP.NET AJAX UpdatePanel lost focus problem

John Avis by | September 30, 2013 | ASP.NET Web Forms Web Development

Solution to the ASP.NET UpdatePanel lost focus on post back issue.
If you like to use a keyboard to navigate a web form that uses an ASP.NET UpdatePanel, you will soon find that once a post back occurs you lose your position in the form.

There has been several solutions to this problem, but I finally found one that works really well. Unlike many, it handles all possibilities: (a) you tab to the next field; (b) you shift-tab to the previous field; and, (c) you stay in the same field (eg. use arrow keys to select DropDownList option).

Source: http://dotnetgyaan.blogspot.com.au/2011/12/restore-lost-focus-of-auto-post-back.html

First step is to create a JavaScript file and add the following code:
var lastFocusedControlId = "";

function focusHandler(e) {
document.activeElement = e.originalTarget;
}

function appInit() {
if (typeof (window.addEventListener) !== "undefined") {
window.addEventListener("focus", focusHandler, true);
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}

function pageLoadingHandler(sender, args) {
lastFocusedControlId = typeof (document.activeElement) === "undefined"
? "" : document.activeElement.id;
}

function focusControl(targetControl) {
if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
var focusTarget = targetControl;
if (focusTarget && (typeof (focusTarget.contentEditable) !== "undefined")) {
oldContentEditableSetting = focusTarget.contentEditable;
focusTarget.contentEditable = false;
}
else {
focusTarget = null;
}
targetControl.focus();
if (focusTarget) {
focusTarget.contentEditable = oldContentEditableSetting;
}
}
else {
targetControl.focus();
}
}

function pageLoadedHandler(sender, args) {
if (typeof (lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
var newFocused = $get(lastFocusedControlId);
if (newFocused) {
focusControl(newFocused);
}
}
}

Sys.Application.add_init(appInit);

Then in your markup, add a script reference to the JavaScript file you created. In this case I called it Refocus.js and located it in the root folder.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/ReFocus.js" />
</Scripts>

Related Posts

Intermittent "Unable to read data from the transport connection: net_io_connectionclosed" errors

by John Avis | May 6, 2020

If you are having intermittent problems sending email in .NET using System.Net.Mail consider switching libraries.


500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.


tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

by John Avis | October 15, 2019

For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment

Tags

About

...random postings about web development and programming, Internet, computers and electronics topics.

I recommend ASPnix for web hosting and Crazy Domains for domain registration.

Subscribe

Get the latest posts delivered to your inbox.