Update Panel - Textbox TextChanged Event is interfering with the DropDown SelectedIndexChanged event - asp.net

Basics:
I have a text box (txtDepositAmount) that people can
enter a deposit amount into and a
drop down (ddlSelectedTerm) that sets the terms.
Through these two values I calculate
the APY (lblCurrentApy).
Rules:
If only one of the values is selected I still want to do an update on the current APY label and clear it.
If either value changes I want to update the current APY and recalculate.
The problem:
As soon as I click away from the textbox and onto the drop down to select my term the drop down flashes and closes because the textbox TextChanged event was just fired.
I have to click on the drop down a second time to be able to select anything!
Do I need to change what event I'm looking at or do I need to move some of the controls outside of the UpdatePanel? Can this only happen if some of the business rules change? Should I just give up and go to javascript?
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table width="100%">
<tr>
<td align="left" style="width: 10%" class="LineAlign">
</td>
<td align="left" style="width: 40%" class="LineAlign">
<asp:Label ID="lblDollarSymbol" runat="server" Text="$"/>
<asp:TextBox ID="txtDepositAmount" runat="server"
AutoPostBack="true" TabIndex="1" MaxLength="14"
ontextchanged="txtDepositAmount_TextChanged"/>
</td>
<td align="left" style="width: 30%" class="LineAlign">
<asp:DropDownList ID="ddlSelectedTerm" runat="server"
AutoPostBack="true" TabIndex="2"
onselectedindexchanged="ddlSelectedTerm_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td align="center" style="width: 20%">
<asp:Label ID="lblCurrentApy" runat="server"/>
<asp:Label ID="lblPercentSymbol" runat="server" Text="%"/>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlSelectedTerm" />
<asp:AsyncPostBackTrigger ControlID="txtDepositAmount" />
</Triggers>
</asp:UpdatePanel>

autopostback="true" on your textbox is causing this, since both controls are reloaded after they leave the textbox. I doubt there is a way to avoid this as long as they are in the same UpdatePanel.
Maybe you could set focus to the dropdown list after the textbox-initiated postback, or you could probably make this work by putting the controls in separate UpdatePanels. But really it seems the wrong way to go about it. I would use javascript (and ajax if the logic is complicated) to update the APY. Or just add a "calculate" button...
(Edit)
Here's a slightly ugly hack to avoid ajax, three update panels and still be able to do your logic server side. I do not approve of this method but it is quick and dirty.
Put the Label control that contains the calculation results in an UpdatePanel. The input controls do not need to be in an UpdatePanel.
In the update panel (with the results) have a hidden submit button:
<asp:Button ID="DoCalculate" style="display:none;" UseSubmitBehavior="false"
runat="server" OnClick="Recalculate()" />
This should be the trigger for the UpdatePanel. Then have your two input controls click that button using javascript to cause a partial postback to the "results" panel. Here is the code to add this javascript for the dropdown, for example, in Page_Load:
ddSelectedTerm.Attributes.Add("onSelectedIndexChanged",
"document.getElementByID('" + DoCalculate.ClientID + "').Click()");
Then in put the C# code to do the calculation and update the label in the 2nd update panel in the "Recalculate()" method.
This should work, and give you better layout control and less code flow ugliness then using 3 update panels.

You can just use the Focus() in the server event. For example if you have txtBox1 and txtBox2 and want to have the focus in the box 2 after write something in box 1 and both of them inside an update panel.
Only go to the TextChange event of the box 1 and write txtBox2.Focus() and after the update of the panel the focus will be in the box 2. :)
Hope helps...

I ripped out the UpdatePanel and just did jquery. Screw Microsoft.

Related

asp.net UpdatePanel not working correctly

Im using an UpdatePanel to refresh a datagrid with some search results but is not working and the whole page goes in postback. i hope somebody can help me, cant get this to work right. . Thanks. Here is my code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" class="pageTitle" valign="top">
<twc:LocalizedLiteral Text="CRMcontxt6" runat="server" />
</td>
</tr>
<tr align="left" style="background-color: #9bbbe3">
<td align="left" colspan="3">
<asp:Label ID="lblSearch" Height="15" runat="server" Font-Bold="true" Font-Size="11"></asp:Label>
<asp:TextBox Width="500px" ID="Search" autoclick="BtnSearch" runat="server" CssClass="boxDesign" />
<asp:LinkButton ID="BtnSearch" runat="server" CssClass="save" />
</td>
</tr>
</table>
<asp:datagrid id="searchresults" runat="server">
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnSearch" />
</Triggers>
</asp:UpdatePanel>
This looks like a familiar .NET Bug. Setting ClientIDMode="AutoID" on the LinkButton should fix it (by the way, you can remove the trigger. It's not needed).
Some solutions:
a. Try Giving UpdateMode = Conditional in the UpdatePanel and try ( when you give triggers
you must define this )
b. Try removing the <table>, and replace it with <div>, sometimes Update Panels are not friendly with the table tag.
c. If above does not work, first try removing the triggers, and the update mode condition and see whether that works. Because if that doesn't work, it means something wrong with the content inside the update panel. You may want to start with some controls to drill down your problem.
d. I see user controls getting called - check if you have update panel inside those user controls placed properly.
Use this in UpdatePanel:
UpdateMode="Conditional" ChildrenAsTriggers="true"
Check that your HTML source does not have 2 or more <form> tags. An asp.net page is supposed to ordinarily have only one <form> tag.
Though this question has been long asked without an answer so far, I faced a similar problem, but discovered the cause of the update panel not working:
When you have a <form> tag in some piece of HTML and then insert that HTML fragment inside the already existing <form> tag of your master page, you get into problems. Each time the child page of the master page is run, and the submit button is clicked, the code the button is supposed to run wont execute. Instead the whole page gets refreshed despite the update panel, and it might also add a query string in the URL of the page.
The nested <form> tag of the master page is at the cause of this. As soon as you remove the extra <form> tag everything should work fine.
Hope this helps someone.
You missed the trigger event. Your trigger should look like this
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnSearch" EventName="Click" />
</Triggers>
Don't forget to set the UpdateMode attrivute of the update panel to Conditional
Here is a reference :: Using Triggers in an UpdatePanel in ASP.NET 4.0 C#

Nested UpdatePanel causes parent to postback?

I'm under the impression that a control in a nested UpdatePanel will cause the top level UpdatePanel to refresh (thus refreshing both UpdatePanels) because any events on that control act as an "implicit" trigger. Is that correct?
I've been trying to wire something like this up-
UserControl
Parent UpdatePanel
"Show" button
ASP:Panel
Dynamically added UserControls, each with UpdatePanels
When the Show button is clicked, the ASP:Panel becomes visible and starts adding UserControls to itself dynamically, based on some back-end logic.
Each of the dynamically added controls (henceforth: UserControls) have their own Atlas-enabled buttons and links, so they have UpdatePanels too. Currently when I click on a link in one of the UserControls, the entire contents of the ASP:Panel disappear, as if it's being re-rendered. All of my dynamically-added controls disappear, and none of their click events are caught in the debugger.
I'm assuming what's happening here is that controls that reside in nested update panels are causing the parent UpdatePanel to post back because they're firing "implicit" triggers. Is there a way for my UserControls to operate autonomously and not mess with the ASP:Panel that contains them?
If not, what strategy should I be pursuing here? If I have to re-render the entire ASP:Panel every time an event happens on one of the (possibly many) UserControls, that means I'll have to recreate the UserControls, which take a bit of effort to create. I'll also have to preserve some kind of view state to recreate them. I'm somewhat new to ASP.NET and that sounds intimidating. I'd rather never refresh the top leve UserControl and ASP:Panel if I can avoid it, and let each of the dynamically-added UserControls fire and handle their own events asynchronously.
EDIT: Instead of adding the controls dynamically, I added them to the markup(not a bad solution). So got rid of the controls disappearing problem, because now the controls are not added dynamically but instead exist in the markup. But still the parent UpdatePanel posting is a big performance hit, because all the UserControls are getting posted instead of one. How do I make only one UserControl postback? Also, I would like to know how to get rid of the problem of controls disappearing if added dynamically?
First off, keep in mind: UpdatePanels do not alter the lifecycle of a page.
All of the Control Tree (including the UpdatePanels) must be reconstructed just as with a Normal Postback Life-cycle.1 2 The UpdatePanels ensure that only a portion of the rendered (HTML) view is returned. Removing all UpdatePanels should result in the same behavior, except with a full postback. For instance, only the HTML representing a nested UpdatePanel (presumably because data changed) might be sent back in the XHR response.
To get "true" AJAX consider Page Methods. Alternatively, DevExpress (and perhaps Telerik and others?) offer their own form of "Callback Panels", which are similar to UpdatePanels, but can bypass parts of the life-cycle (and, as a result often do not support the ViewState model entirely or may introduce their own quirks).
While not understanding the above is the most likely reason for the controls "disappearing", here is my rule: Do Not Let [Nested] UpdatePanels Work "Automatically".
Edge cases with dynamic controls and nested UpdatePanels will be encountered. There might be a nice way to handle this, but I have failed on multiple different attempts.
Instead, for every update panel, run with:
UpdateMode="Conditional"
ChildrenAsTriggers="False"
With the "Conditional" UpdateMode, make sure to manually specify the Trigger control or call panel.Update() (although this hard-wires the Control) as required. Depending on needs ChildrenAsTriggers="True" might work as well. The big thing is that UpdateMode is not "Always" which is the default.
After switching to this approach, I have no problem -- well, almost none -- with nested UpdatePanels.
Happy coding!
1 If the page doesn't render correctly where Partial Rendering (in the ScriptManager) is disabled (e.g. all requests are full postbacks) then there is no reason to expect/believe it will work correctly with UpdatePanels.
2 There are times when it's warranted to "cheat" expensive recomputations in the control tree for controls that will not be re-rendered. However, I would consider these advanced cases that should only be done when performance analysis indicates there is a specific need.
I had a similar issue with a heavy ajax Gridview control, and a HTML page with multiple UpdatePanels, some nested, some not.
It took me over 3 weeks of trial and error, reading, testing, debugging and prototyping to finally resolve all the post backs and partial postbacks.
However I did notice a pattern, which worked for me.
Like the #user above's response, make sure your UpdatePanels are set Conditional and only specificy asp:PostBackTrigger on the final or decisive control that you want the page to do a full postback on. I always use asp:AsyncPostBackTrigger where ever possible.
So for example, if you're using UpdatePanels inside a GridView and you want a popup inside a cell of the gridview's row, then you need to use a nested UpdatePanel.
ie
<asp:TemplateField HeaderText="Actions & Communications">
<ItemTemplate>
<asp:UpdatePanel ID="upAction1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnActionOK" />
</Triggers>
<ContentTemplate>
...
...
<ajaxToolkit:ModalPopupExtender ID="ajaxMPE" runat="server"
BackgroundCssClass="modalBackground"
PopupControlID="upAction2"
TargetControlID="btnADDaction">
</ajaxToolkit:ModalPopupExtender>
<asp:UpdatePanel ID="upAction2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlACTION" runat="server" CssClass="pnlACTION">
<div id="divHDR">
<asp:Label ID="lblActionHdr" runat="server">** header **</asp:Label>
</div>
<div id="divBOD">
<table style="width: 98%; text-align:left">
<tr>
<td colspan="2">
Please enter action item:<br />
<asp:TextBox ID="txtAction" runat="server" ValidationGroup="vgAction" TextMode="MultiLine" Rows="3" Width="98%"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAction" runat="server" ControlToValidate="txtAction" ValidationGroup="vgAction"
ErrorMessage="* Required" SetFocusOnError="True"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td colspan="2">
Select staff assigned to this task:<br />
<asp:DropDownList ID="ddlActionStaff" runat="server" AppendDataBoundItems="true" ValidationGroup="vgAction" />
<asp:RequiredFieldValidator ID="rfvStaff" runat="server" ControlToValidate="ddlActionStaff" InitialValue="0" ValidationGroup="vgAction"
ErrorMessage="* Required" SetFocusOnError="True" Width="98%"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<asp:Button ID="btnActionOK" runat="server" Text="OK" OnClick="btnActionOK_Click" ValidationGroup="vgAction" CausesValidation="false" />
<asp:Button ID="btnActionCANCEL" runat="server" Text="CANCEL" OnClick="btnActionCANCEL_Click" ValidationGroup="vgAction" CausesValidation="false" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
<asp:SqlDataSource ID="sdsTETactions" runat="server" ConnectionString="<%$ ConnectionStrings:ATCNTV1ConnectionString %>"
...
...
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
Notice a few things here:
The ModalPopupExtender does not refer to the Ok and Cancel buttons. This is because I want them to trigger a partial postback to the server (code-behind)
The nested UpdatePanel (upAction2) is purely to force a partial postback on that panel only (pnlAction)! Therefore this forces the data validation triggers to work and keep the panel open if the user does not provide data in the requiredfield validators
The main UpdatePanel (upAction1) controls the entire lot and keeps all postbacks held within that panel only and NOT affecting the gridview (not shown entirely).
There is a great article here, which explains it better.
I hope this helps someone

User control inside update panel causing full page postback

I have a user control with linkbuttons (used for paging) and a repeater inside an update panel. The paging works correctly, but is causing a full page postback every time I click through to the next page.
The update panel looks like this:
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Repeater ID="rptOrganizations" runat="server">
<HeaderTemplate>
<table>
<thead>
<tr>
<th>Organization</th>
<th>State</th>
<th>Accredited Since</th>
</tr>
</thead>
</table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Literal ID="ltlInstitution" runat="server" />
</td>
<td>
<asp:Literal ID="ltlState" runat="server" />
</td>
<td>
<asp:Literal ID="ltlAccreditedDate" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<uc2:RepeaterPaging ID="rpPager" runat="server" PageSize="10" OnNextButtonClickEvent="btnNext_Click" OnPreviousButtonClickEvent="btnPrev_Click" />
</ContentTemplate>
</asp:UpdatePanel>
And the contents of the user control look like this:
<asp:LinkButton ID="btnPrev" runat="server" OnClick="btnPrev_Click">Previous</asp:LinkButton> |
<asp:LinkButton ID="btnNext" runat="server" OnClick="btnNext_Click">Next</asp:LinkButton>
<asp:Literal ID="ltlNumResults" runat="server" /> results returned.
So far, I have tried adding an async postback trigger for the user control, which does cause an async postback but does not update the rest of the text in the update panel. In otherwords, the async postback occurs and the next page shows up, but the original text in the repeater is there as well just below it.
I have also confirmed that I have IDS set on my linkbuttons, since that can trigger a full postback inside an update panel.
I have tried changing the update panel mode (Always, Conditional, ChildrenAsTriggers, etc.).
None of it makes a difference - the only thing that actually causes an async postback is to use the trigger, but then the rest of the content in the update panel is not updated, so I get duplicate content. Any ideas?
Full postback happens if your UpdatePanel cannot render its contents to a <div> (e.g., when it is situated inside of <tr>). So check you html inside of UpdatePanel, you might find the answer there (also, look for some incorrect xhtml, like incorrectly closed elements).
Remove the update mode="Always" Don't put anything over that and it should work.
One more thing are you adding script manager to your page or control not?
Without script manager it will not work.

ASP.Net ListBox selections not working in Panel?

I'm having trouble processing a listbox after selecting some items from it. In my markup, the listbox is contained within an asp:panel and is populated during page load in the codebehind. That part works fine.
It's when I select various items and submit that I have trouble. My handler loops through the listbox items but doesn't see any as being selected. I'm not sure why.
Here's the markup:
<asp:Panel ID="panEdit" runat="server" Height="180px" Width="400px" CssClass="ModalWindow">
<table width="100%">
<asp:label runat = "server">Choose your items</asp:label>
<tr>
<td>
<asp:ListBox ID="lstFundList" runat="server" SelectionMode="Multiple" OnLoad="lstFundList_LoadData">
</asp:ListBox>
</td>
</tr>
</table>
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_OnClick"/>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="$find('ModalPopupExtender1').hide(); return false;" />
</asp:Panel>
In my btnUpdate_OnClick handler I can't see any listbox items that are marked as selected. I assume something strange is going on with respect to postback and the panel?
I agree, it's most likely a postback problem. Make sure the code that is populating the listbox is wrapped in something like this:
if (!Page.IsPostBack)
{
// populate your list
}
...is populated during page load in the codebehind
Is that wrapped in an IsPostback conditional? If not, then you're just overwriting the returned values.
`OnLoad="lstFundList_LoadData"
You may want to check that method too....
Thanks everyone. Sure enough, it turned out to be an IsPostBack issue. It's used in all of our pages (and no doubt yours) and had become a sort of background noise, and I simply missed it here.

Update Panel on master page refreshes child page update panels also

I have a master page on which at the top i show a div using jquery. in that div i have a update panel with a checkbox with autopostback true. basically i want to make a menu to change settings without full page postback.it works perfectly
but i have a certain child page in which i have a gallery which has a update panel inside which is a datalist to be able to change images without postback.
problem is when i click on the master page checkbox the update panels on the child page also get refreshed..why this happens???
also for the master page updatepanel i have update mode to conditional and childeren as triggers to false and i have set an asynchpostback trigger for CheckBox1_CheckChanged event.
so am i doing anything wrong...
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
<ContentTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="padding-right: 2px">
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" />
</td>
<td>
notify me of new buzz through email</td>
</tr>
</table>
<asp:HiddenField ID="bmStatus" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CheckBox1" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
do i have to set any other settings on the child page update panels...i will post the child page update panel code if asked!!!
Thanks a lot
An UpdatePanel is a full postback no matter what. I recommend removing ChildrenAsTriggers="False" unless you have some other reason for needing it. Below is a link to what this setting does. You may need multiple UpdatePanels to achieve your desired functionality.
http://www.asp.net/ajax/documentation/live/mref/P_System_Web_UI_UpdatePanel_ChildrenAsTriggers.aspx

Resources