Hi All,
I'm having an issue where any updatepanel that does an async postback IE 7 and IE 6 will lose the tab order when the partial postback occurs.
Below is some example code you can paste into a new code page and view the issue. Just run the page in IE and tab, it will work correctly, but if you push the button which does a small postback you will notice the tabindex reset itself. Can anyone explain this or possibly confirm this is a bug. Ive seen numerous posts that discuss this but only give a javascript solution. It seems like IE should handle this correctly considering firefox does
<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanelID="upnlTest"runat="server"UpdateMode="conditional"><ContentTemplate>
<asp:TextBoxID="txtTest"runat="server"AutoPostBack="true"TabIndex="1"></asp:TextBox>
<asp:ButtonID="tstButton"runat="server"TabIndex="2"Text="Push Me"/>
</ContentTemplate></asp:UpdatePanel>
<asp:TextBoxID="txtTest2"runat="server"TabIndex="3"></asp:TextBox>
</form>
</body>
</html>
Any thoughts or help with this would be appreciated.
TIA,
AjaxButter
I'm having the same problem, any solutions?
Could you use server side code and re-establish the tab order?
txtTest.TabIndex="1"
txtTest2.TabIndex="2"
Do you need to have the AutoPostBack="true" in the txtTest TextBox? That seems to be what is causing the problem. As soon as you tab out it fires a __doPostBack().
You could try adding a trigger for the txtButton Button and setting the UpdatePanel to have the attribute ChildrenAsTriggers=false, this will let you tab through the fields without having the postback lose your focus.
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Untitled Page</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanelID="upnlTest"runat="server"UpdateMode="conditional"ChildrenAsTriggers=false>
<Triggers><asp:AsyncPostBackTriggerControlID=tstButtonEventName=click/></Triggers>
<ContentTemplate>
<asp:TextBoxID="txtTest"runat="server"AutoPostBack="true"TabIndex="1"></asp:TextBox>
<asp:ButtonID="tstButton"runat="server"TabIndex="2"Text="Push Me"/>
</ContentTemplate></asp:UpdatePanel>
<asp:TextBoxID="txtTest2"runat="server"TabIndex="3"></asp:TextBox>
</form>
</body>
</html>
Cheers,
Al
I havn't tested this but I read somewhere on these forums before that placing the tab control within an update panel will make it hold its tab index after a partial postback.
But as I said I dont know if this works. Let us know if it does.....
Ignore my previous post, I read your initial post too quickly and thought it was about the tab control.
Yes I have the same issue with loosing the tab index on the controls after a postback. I think there is scriptmanager.setfocus command you can use to reset the focus...
Well first off just want to say thanks for the replies. As far as setting the code server side that doesn't work even with making the call it still sets you into the address bar. As far as Al goes I need to have the postback as some code is firing that is needed, Also mind you that the tabbing stays correct in firefox even with the postback as you would expect. As far as the scriptmanager.setfocus I considered using this but I have around 50 controls on a page which means i would have to setup one per postback. Times that around 40 pages and that equals a lot of work. I truly think this should be considered a bug unless someone at microsoft our in there development teams can tell me possibly what im doing wrong or confirm this is an issue.
Any help with this is greatly appreciated.
AjaxButter
Hi AjaxButter,
Is it possible to replace the AutoPostBack and handle it through some JavaScript? You could at least get around having the issue of the PostBack losing your field focus. You could execute script in JavaScript with an onBlur event handler and take care of any of your PostBack needs that way. It might mean changing a lot of how you are doing things now, but the data from the TextBox could be web serviced back via JavaScript and you could achieve the same processing on the server. It seems like a lot of work though just to fix a tab focus issue.
Depending on how complicated your form is you could use some JavaScript to simply keep track of the most recently focused field and when the UpdatePanel finishes updating simply bring the focus back to that particular field. It wouldn't take much, you just need to set a variable with the latest form DOM field either when that field gets onFocus or onBlur and then bring the focus back after the UpdatePanel updates:
<
scripttype="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args){
if (args.get_panelsUpdated().length > 0){
$get(
LASTFOCUSEDFIELD).focus();
}
}
</script>
That example above is a bit 'simple' and there are better detailed uses of the PageRequestManager class here:
http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx
I'm probably starting to go way down a path you won't want to venture down. Haha... I'm starting to ramble, but hopefully these ideas may help. :)
Al
Al,
First off just want to say thanks for the reply back. As far as your two suggestions we are nearing completion on this site and there is probably close to 30 pages and each page has various functionality that postbacks at various times. To create a web service would be an entire redesign of the site which is just not an option. Also that seems to me as defeating the purpose of using ajax and partial rendering as you would essentially be writing code which does what their code is doing only slightly different. The only thing wrong with your second suggestion is if I have the tab go back to the field it just left in some instances it would just recause the postback to occur when you again retabbed from that field. We have actually thought about going that way but it would be a lot of work as we would need to put the name of the next field in the tab order on the fields onblur event that comes before it. Daunting task when each page has roughly 100 controls on it. I guess I was dreaming in hopes that maybe someone could tell me yes this is a bug in IE and it should be getting fixed.
I have a feeling if I don't get any better suggestions soon we will have to just keep pushing on.
Thanks,
AjaxButter
Here a workaround is explained:
http://www.codeproject.com/useritems/MainatinFocusASPNET.asp?df=100&forumid=384902&exp=0
Thanks for the reply I will give that a shot as it sounds simple enough to implement. I still think this is a bug that should be fixed. The only thing that concerns me with this solution is the fact your having to add the script call to almost every control and the settimeout call, granted its a short one. I'm wondering if its going to have a performance hit with it as we are already doing recursive ui loading from business objects. Either way I'll give it a shot.
AjaxButter
i have written a post on CodePlex to solve that problem...
http://www.codeplex.com/WorkItem/View.aspx?ProjectName=AtlasControlToolkit&WorkItemId=7194
I hope it helps
Cheers!
Well I checked out your workaround and it looks like its unrelated to the issue in this thread. The issue in this thread is that an asynchronous postback causes IE to reset the tabbing back to the address bar if tabindex is set on your fields and a async postback occurs. The issue you posted in regards to was the tabcontainer. As far as the issue goes I decide to go with my own workaround that takes place in my masterpage. I record the field id posting back when its async and find the next field in the tab order based on tabindex and then use scriptmanager.setfocus passing the next control in the tab order. very cludgy and still think that microsoft should consider looking into this issue as firefox works perfectly.
AjaxButter
you are right!,i have written in a wrong post.
Sorry!
I also have same prblm.
