I have a ASP.Net webform that has several textboxes. Some of the textboxes have an OnTextChanged event with AutoPostBack set to true.
When the user enters some text and leaves the textbox, I want some code to run. This part works fine.
The problem is that if a user enters some text, then clicks or tabs to another textbox, the OnTextChanged of the current textbox event fires fine but the textbox that the user clicked on does not keep focus. This causes problems because the user thinks they are on the next textbox but they aren't. And no object seems to have the focus.
Is there anything that can be done to make the next object keep focus while the OnTextChanged event of the current textbox fires?
One option is to use <asp:UpdatePanel> Control.
Facts about using it:
The postback request would be made via AJAX.
It would not recreate the whole page HTML.
When the UpdatePanel updates, it replaces the DIV innerHTML, that would make the textbox lose focus (bad point).
To maintain the focus, you would have to avoid the UpdatePanel from updating when the textbox posts back.
You can avoid the update by setting the UpdateMode and ChildrenAsTriggers properties.
Here is an example:
<asp:UpdatePanel ID="uppTextboxes" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:TextBox ID="txb1" runat="server" AutoPostBack="true" OnTextChanged="txb1_OnTextChanged" />
<asp:TextBox ID="txb2" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Since the whole page is recreated on postback on serverside and the browser will recreate all html on clientside, you have to tell ASP.NET that your TextBox needs focus.
Use Page.SetFocus:
Page.SetFocus(IdOfControl);
However, i would prefer not to postback at all if i can. Can't you use a button that the user has to click after he has entered all necessary data?
Related
I reference a previous post: Focus lost on partial postback with UserControls inside UpdatePanel
where an excellent solution works perfectly for web-page controls within a form.
However, I have placed my UC inside a detailsview template-field (for Edit+Insert).
The UC contains an UpdatePanel needed to adjust the text-formatting and control's style(s) following the TextChanged event of the UC-textbox (AutoPostback=True) during the Edit-mode and Insert-modes of the DetailsView.
As such, when the DetailsView-control is in Edit-mode, and user changes Text in the UC, the textchanged event is fired and the user-entered value is validated and when OK, the thousounds-separator (comma) are added to the UC-textbox-text, BUT, the focus moves to the next field in the DetailsView and QUICKLY returns back to the UC-control.
This incorrect focus-move(s) does NOT occur when the UC is wrapped in updatepanels as noted in the referenced post since the focus and tabbing order works perfectly outside of the DetailsView control.
Here is the aspx markup for the template-field-EDIT (only).
<asp:TemplateField HeaderText="Initial Mileage" SortExpression="IMilage">
<EditItemTemplate>
<asp:UpdatePanel ID="updpnlIMilage" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<TGANumeric:GANumeric ID="ucnumIMileage" runat="server"
Caption="Initial Mileage" HideCaption="True" Width="160"
DisplayMask="999,999" InputMask="999999"
Enabled="True" IsRequired="False"
MinNumber="0" MaxNumber="999999"
Text='<%# Bind("IMilage") %>'
TabIndex="0"
/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ucnumIMileage" />
</Triggers>
</asp:UpdatePanel>
</EditItemTemplate>
Thanks in advance. Your comments are welcome.
Thanks...J.
So are you saying your control hierearchy (partial) is:
UpdatePanel > TGANumeric:GANumeric > UpdatePanel > TextBox
This is an awful lot of overhead to just format a number with a comma, which is the only reason I see for your posting back. As far as I can tell there is nothing you need from the server, so why post?
Or is there?
My thoughts, lose the update panels, disable the AutoPostback on the Textbox, handle the formatting client side if it must be seen immediately, or leave the formatting to the DetailsView field DataStringFormat when it posts after save.
I'm betting this will clear up any focus issues.
Based on all the comments in this thread, I want to explain the actual root cause of the tabbing misbehavior.
1) There were no coding issues or event-issues with the user-control.
2) There were no coding issues or event-issues with the layering of Master-page, Content-page, Ajax update-panels / nested update-panels, details-view and template-fields containing the user-control.
3) The real culprit was a small snippet of code where the page adjusts the web-controls on the form based on the "state" (status) of the page/form. I manage the adjusting of visible and/or enabling of web-controls in a single subroutine in the code-behind so that all of this enabling/disabling visible/not-visible occurs in one place under a set of CASE-statements.
The actual erroneous snippet of code inside the 'sbSetFormState()'-method was messing with the class-variable 'm_eFormState' that actually caused the update panel to re-fire and thus the tabbing got thrown out of sequence.
This was discovered by the great suggestion from 'fnostro' to remove or add functionality features until the mis-behavior exposes itself.
I mark this topic as resolved/closed.
Again, thanks to fnostro !!!
In ASP.net I have a simple textbox and radio button list with yes or no options. On the VB server-side I implement OnClick of the radio button and it does things.
<asp:RadioButtonList ID="rbltest" runat="server" AutoPostBack="true" OnSelectedIndexChange="rbltest_SelectedIndexChanged" <asp:ListItem Text="Yes" Value="0"></asp:ListItem>
<asp:ListItem Selected="True" Text="No" Value="1"></asp:ListItem>
</asp:RadioButtonList>
The only problem is simply that if I click the radio button, then enter data into the TextBox (immediately - in less than 2 seconds), when the radio button returns, it deletes the data. This is annoying. Is there anyway around it?
The only way to fix this is to remove AutoPostBack=true on the RadioButtonList control. The auto-postback option immediately initiates an HTTP post back to the server, so anything typed after then is going to be lost.
Other options:
Implement a client-side onclick handler, and disable the text while the post-back processes (ie, make it clear to the user that they can't type anything, aka the principle of least astonishment).
Implement the change logic completely on the client side using Javascript
Use the ASP.Net AJAX UpdatePanel to do the postback asynchronously (this would not require a full postback to the server, so would allow you to keep typing).
You must delete EnableViewState="false" on your control who lose data, and let default value of ViewState (true) on control.
I am using an ASP.NET update panel to retrieve user info using the on TextChanged for the textbox, here is my code:
<asp:UpdatePanel runat="server" ID="up1" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:TextBox runat="server" ID="loginEmail" Text="Email"
CssClass="textBoxes" OnTextChanged="userInfo" AutoPostBack="true"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="loginEmail" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
and the code behind:
string url, emailInfo;
emailInfo = loginEmail.Text;
url = Membership.GetUserNameByEmail(emailInfo);
emailText.InnerText = "Email: " + emailInfo;
urlText.InnerText = "Webiste: http://www.Elwazefa.com/User/" + url ;
the code wont fire on textchanged but it wil,
on ButtonClick or PageLoad.
What is the problem?
Using ASP.NET 4.0
<asp:TextBox AutoPostBack="true" OnTextChanged="thingId_TextChanged" ID="thingId" runat="server"></asp:TextBox>
AutoPostBack on text-box will trigger post-back when the focus is lost from the text box. TextChanged event will be fired on any subsequent post-back (can be due to button-click or text box focus change). So you need to make certain
After text is changed, you are moving out of text-box
Whatever controls that you are change are part of update-panel (can be different update panel). If there are not part of any update panel then those changes won't get reflected on client side.
My guess is you are probably suffering from #2. You can use tool such as Fiddler (or Firebug on FireFox) to check if browser is firing AJAX (XHR) request when the focus is lost from the text-box.
As #VinayC posted, AutoPostBack means that the page will postback to the server when your TextBox loses focus. No built-in event causes postback on every character added to a text input, and for good reason. UpdatePanel postbacks don't cause the page to flicker, but they can be just as heavy as a full postback.
If you want to work around this, you can give your textbox a client onchanged event handler, the JavaScript of which will be built from Page.ClientScript.GetPostBackEventReference().
The correct solution would be to use an AJAX method call from your JavaScript code rather than an UpdatePanel partial postback in onchanged.
I have an ASP.NET form with a few controls and a submit button at the bottom, all inside an update panel:
<asp:UpdatePanel runat="server" ID="upContent">
<ContentTemplate>
<asp:TextBox runat="server" ID="tbxMyTextBox" AutoPostBack="true" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return doStuff()" OnClick="btnSubmit_Click" />
</ContentTemplate>
</asp:UpdatePanel>
If I write something in the TextBox and click 'submit' immediately (without clicking out of the TextBox first), the changes are not recorded (as seen in the server-side event handler). However, if I write something in the TextBox, and then change focus to another control, an AutoPostback happens through the UpdatePanel and then clicking 'submit' does recognize these changes. How can I force this content to update right as I click the submit button, while still running both the clientside and serverside events attached to it? Thanks!
Is is possible that your text-box gets cleared due to some on-submit/on-click event handler? I will suggest you do use some tool such as Fiddler to inspect the POST data in request. Or you can put a break-point at your server side code and inspect the request data. Look for particularly Request.Form[tbxMyTextBox.UniqueID] - i.e. look for presence of value for your text-box's name (name property at client side which corresponds to UniqueID property at server side). If the request contains the value typed in the text-box then something is happening on server side but good news is you can always retrieve the value from Request object. If the value is not present in the Request object then it means that client side code is clearing the value before the submit.
If an onclick method returns false, it cancels the action that the button would normally perform. As your button would normally submit your form, but it appears not to be submitting, your client side javascript code in doStuff is probably returning false.
A typical situation:
In my GridView control, I have a Footer row which contains a Textbox and an "Add" Button. When the button is pushed, the Text entered in the TextBox is added to the grid. I also have a validation control to require that, when the button is pushed, that text has been entered in the TextBox. After a new row is added, the textbox is clear to allow for easy entry of the next item.
The user may also edit the text in previously entered rows by clicking the Edit LinkButton, which puts the row into edit mode. Clicking an Update LinkButton commits the change.
The problem:
When, I click the Update link to commit the changes, if text has not been entered in the Footer row's TextBox (the row used to add a new entry), the validation control returns a "Entry Required" error. It should only require an entry if the Add button is pushed, not if the Update LinkButton is pushed.
It seems that the server side Validation control's validating event fires before the GridView's RowCommand event or the btnAdd_Click event, so I am wondering how, from the server, I can determine what event fired the postback so I can determine whether what edits should be performed for the given situation.
I am using a mix of client side "required" validation edits as well as more complex server sides. Since I probably have to have some server sided validations, I would be happy with just knowing how to handle server sided validations, but really, know how to handle this situation for client validations would also be helpful.
Thanks.
Convert your CommandField into a TemplateField, and in the EditItemTemplate, change the Update LinkButton's CausesValidation property to false.
Update:
Converting to a TemplateField is simple and doesn't require any code changes (just markup):
Changing the CausesValidation property to false in the markup is also straightforward:
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="lnkUpdate" runat="server" CausesValidation="False"
CommandName="Update" Text="Update"></asp:LinkButton>
<%--
More controls
--%>
</EditItemTemplate>
<ItemTemplate>
<%--
Controls
--%>
</ItemTemplate>
</asp:TemplateField>
Now, if you want your footer and data rows to be validated separately, you need to use validation groups, which is explained in Microsoft's documentation. All the controls in the same validation group will have their ValidationGroup property set to the same value, like this:
<asp:LinkButton ID="lnkUpdate" runat="server" CausesValidation="True"
CommandName="Update" Text="Update" ValidationGroup="GridViewDataRowGroup">
</asp:LinkButton>