I'm using an ASP.NET Accordion control with lots of panes for a data entry form. Within several of the panes are some UpdatePanels, so that some controls within those panels can be enabled or disabled to prevent users from entering values into fields which are precluded by values they've entered elsewhere.
It all works fine, but for some reason, on about half of the occasions where an UpdatePanel postback is triggered (by a specified AsyncPostBack Trigger), the first pane of the Accordion momentarily expands and collapses. This gives that horrible 'flashing' experience you get when a page does a full postback, which is exactly what I'm trying to avoid by using UpdatePanels.
The problem doesn't seem to relate to the contents of the first pane - I tried completely deleting the first pane, so that the second pane became the first, and the same thing happens.
Anybody got any ideas why this is happening and how to fix it?
UPDATED WITH CODE
This is an example of one of the panels. Don't be too offended by the use of a table - it's an actual table, I'm not just using it for layout purposes!
<tr class="grouprow">
<td>Transportation</td>
<td><asp:RadioButtonList ID="rblTransportation" runat="server" RepeatDirection="Horizontal" SelectedValue='<%# Bind("AdmissionTransportation")%>' AutoPostBack="true"
OnSelectedIndexChanged="rblTransportation_SelectedIndexChanged" >
<asp:ListItem Text="Unknown" Value="" />
<asp:ListItem Text="Yes" Value="True" />
<asp:ListItem Text="No" Value="False" />
</asp:RadioButtonList></td><td></td>
</tr>
<tr class="grouprow">
<td>Transportation Duration</td>
<td><asp:UpdatePanel ID="updTransportationHours" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rblTransportation" EventName="selectedindexchanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtTransportationHours" runat="server" Text='<%# Bind("AdmissionTransportationHours")%>' CssClass="tinytextbox" />
<label class="unit">Hours</label>
<asp:RegularExpressionValidator ID="revTransportationHours" runat="server" ControlToValidate="txtTransportationHours" ValidationExpression="\d{1,3}(\.\d{1,2})?"
ValidationGroup="Past30Days" ErrorMessage="Invalid format for Transporation Duration. Please enter in format 'xxx.xx', e.g. '3.25'" Display="Dynamic"
CssClass="error" >*</asp:RegularExpressionValidator>
<asp:RangeValidator ID="rvTransportationDuration" runat="server" ControlToValidate="txtTransportationHours" CssClass="error" ValidationGroup="Past30Days" type="Double"
ErrorMessage="The Transportation Duration cannot be more than 100" MinimumValue="0" MaximumValue="100" >*</asp:RangeValidator>
</ContentTemplate>
</asp:UpdatePanel></td><td></td>
</tr>
I believe you need your rblTransportation RadioButtonList wrapped in an UpdatePanel as well.
Since that control isn't in an UpdatePanel, it causes a full postback.
The answer is gloriously simple, though I'm too tired to figure out why it works just now. I simply need to set ClientIDMode = AutoID on the RadioButtonLists and CheckBoxLists and they now trigger an asynchronous postback rather than a full one. They don't need to be within their own UpdatePanels either.
I got the answer from this SO question.
Can you try <asp:blablacontrol style="Display:none;"> </asp:control>
modalpanels has same problem and this codes solved my problem
html
<asp:DropDownList ID="ddlOffice" runat="server" Rows="10" Width="300px" AutoPostBack="true" OnSelectedIndexChanged="ddlOffice_SelectedIndexChanged" EnableViewState="true" />
Even though according to MSDN I am doing everything correctly. the SelectedIndexChanged still fires twice. Any ideas how this can fixed?
One possible reason: If you have a also registered the event handler in codebehind(f.e. via Handles clause in VB.NET or += in C#) it will cause the event to be fired twice.
Then you just have to remove one of it, for example on aspx:
<asp:DropDownList ID="ddlOffice"
runat="server" Rows="10" Width="300px"
AutoPostBack="true"
EnableViewState="true" />
I am trying to use a FileUpload control in a ModalPopupExtender in an UpdatePanel.
I have set a trigger for my Upload button, so that it does a full postback.
What happens is that after the full postback, all the ModalPopupExtenders that I have in the page show up one after the other at the bottom of my page, rah
I've tried using the AsyncFileUpload control, but have not been able to get the UploadEvent to fire, have tried everything I could find in Google. Decided to stick with the FileUpload control.
<ajaxToolkit:ModalPopupExtender ID="MPEBannerImage" runat="server" TargetControlID="btnBannerImage" PopupControlID="pnlBannerImage" Y="200">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlBannerImage" runat="server" Width="530px" >
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:ImageButton ImageUrl="btn-UploadFile.png"
ID="btnUpload" runat="server" OnClick="btnUpload_Click" />
</asp:Panel>
I have a page with Ajax Tab controls, within one of the tabs is a webcontrol that as a Telerik RadGrid, with Edit forms pointing to another web control. That edit form also contains Ajax Tabs and on one of those tabs, there is an Ajax modal popup of yet another webcontrol.
The initial webcontrol works fine when used on its own page, but the edit form fails to appear when the control is used within the Ajax Tabs as desired. The script manager is throwing the following error:
Microsoft JScript runtime error: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'xxx'. If it is being updated dynamically then it must be inside another UpdatePanel.
Any assistance with this would be appreciated.
This issue occurs in Telerik RadAjaxManager when you adds invisible controls to it.
So in case of your in need to show/hide AJAX controls, it is recommended to add AJAX settings grammatically from you code behind (based on control visibility state) instead of ASPX code.
For more information: Please check this answer on the Telerik forums.
Well, I am considering this error is coming in your script. If you are showing/hiding the update panel then it will give this error. The best solution is known to me which worked too is put your update panel into the content template of the other update panel which will be the parent of the update panel that you are showing/hiding.
<asp:UpdatePanel ID="Panel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:UpdatePanel ID="Panel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="labwl1" runat="server" Text="Label">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel >
</ContentTemplate>
</asp:UpdatePanel >
Now if you will hide the update panel with id Panel2 it won't give any error.
In most of the cases - If container/Parent of that update panel is trRow
and you have somewhere in code like trRow.Visible = false; then It wont find said updatepanel and throw error.
To start off with the troubleshooting, I personally will try to remove parts of the code and thus designate the reason for the error. For example, remove the grid and load the user control dynamically on tab click to see if the problem remains, then remove the inner ajax tab or the modal popup and perform another check, etc.
That is correct, I've wasted 2 hrs to find out why all of the sudden my code stopped working...
turned out I've been a bit cleaning a bit too much of my rem'ed code out and removed a closing in my update panel...
<asp:UpdatePanel ID="submitupdatepanel" runat="server">
<ContentTemplate>
<div class="block" style="height: 60px; width: 400px;">
<div class="centered">
<asp:LinkButton ID="submitbutton" runat="server" CssClass="button_red2 " Text=" <span>Submit </span>">
</asp:LinkButton>
<asp:LinkButton ID="cancelbutton" runat="server" CssClass="button_gray2 " Text=" <span>Cancel</span>" Visible="false" OnClientClick="window.close()">
</asp:LinkButton>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<div style='display: none'>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="myhiddenpopups2" runat="server" Visible="true"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
which then gave this same error on the hidden updatepanel part below it.
After i put the missing back in, al went back to normal status
<asp:UpdatePanel ID="submitupdatepanel" runat="server">
<ContentTemplate>
<div class="block" style="height: 60px; width: 400px;">
<div class="centered">
<asp:LinkButton ID="submitbutton" runat="server" CssClass="button_red2 " Text=" <span>Submit </span>">
</asp:LinkButton>
<asp:LinkButton ID="cancelbutton" runat="server" CssClass="button_gray2 " Text=" <span>Cancel</span>" Visible="false" OnClientClick="window.close()">
</asp:LinkButton>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<div style='display: none'>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="myhiddenpopups2" runat="server" Visible="true"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Hope it helps for someone.
K
I resolved the issue by removing the UpdatePanel on the initial tab that contained the WebControl. I'm not clear on why this should have caused the issue though so if anyone can explain that, I'd be interested to find out.
So, for example, I originally had this:
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="TabContainer1_OnChanged" Visible="true" >
<cc1:TabPanel runat="server" ID="TabPriorities">
<HeaderTemplate>Manage Prioritys</HeaderTemplate>
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanelPriorities" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc1:PriorityGrid ID="PriorityGrid1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
And I changed it to:
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="TabContainer1_OnChanged" Visible="true" >
<cc1:TabPanel runat="server" ID="TabPriorities">
<HeaderTemplate>Manage Prioritys</HeaderTemplate>
<ContentTemplate>
<uc1:PriorityGrid ID="PriorityGrid1" runat="server" />
</ContentTemplate>
</cc1:TabPanel>
And that resolved the script error coming out of the user control which also contained ajax tabs and a modal popup.
This can be caused by unclosed tag or missing end tag.
In my case I had 2 update panels on the page, but only 1 of them had an ID. Setting an ID for the other one resolved the error.
My page contains a few updatepanels. I fixed this error by making sure all of them were visible and didn't have display:none.
You can find which panel is causing the error by viewing the source of the page and searching for the ID the error is giving you.
EDIT: I'd like to revise my answer based on some new things I discovered while working with update panels in UpdateMode="Conditional".
This is still in context of addressing the OP's issue of encountering the above error.
The scenario for me is that I have a parent update panel with several nested child update panels:
<asp:UpdatePanel ID="upParent" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%-- Header Content --%>
<asp:UpdatePanel ID="upChild1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%-- Child1 Content --%>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upChild2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%-- Child2 Content --%>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnEditMode" runat="server" Text="Edit" OnClick="btnEditMode_Click"></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
In order for the Edit button to change content in both child update panels and also refresh the overall Parent update panel without causing any issues, you might want to consider doing an asynchronous postback:
<asp:UpdatePanel ID="upParent" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnEditMode" EventName="Click" />
</Triggers>
<ContentTemplate>
<%-- Header Content --%>
<asp:UpdatePanel ID="upChild1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%-- Child1 Content --%>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upChild2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%-- Child2 Content --%>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnEditMode" runat="server" Text="Edit" OnClick="btnEditMode_Click"></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
This works for me, I don't get the above mentioned (OP's) error any longer.
Interestingly enough, almost similar to the OP's scenario, I've been working with Ajax Tab Controls and each tab contained child update panels. This is where I've encountered the exact same error message and resolved it by adding the asynchronous post back trigger.
When an AutoCompleteExtender is displayed in IE6 it seems to ignore z-index and renders below any select controls (like dropdownlists) in IE6.
<asp:TextBox ID="TextBox1" runat="server" />
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" EnableCaching="true" CompletionSetCount="5"
FirstRowSelected="true" ServicePath="~/Services/Service1.asmx" ServiceMethod="GetSuggestion" />
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="Item 1" Value="0" />
<asp:ListItem Text="Item 2" Value="1" />
</asp:DropDownList>
How do I make it render above dropdownlists?
Nothing renders below select controls in IE6. It's one of the many "features" microsoft bestowed upon us when they gifted IE to the world
You have to hide them, then re-show them.
Observe the standard lightbox script - which does exactly this
(note that link is just to the first thing I found on google which had the source to lightbox.js as a demonstration. It's got nothing to do with anything else)
#Orion has this partially correct - there is one other way to deal with these, and that is to cover the offending select lists with an iframe. This technique is used in Cody Lindley's ThickBox (written for jQuery). See the code for details on how to do it.