Strange UpdatePanel and Extender control error - asp.net

I have the below markup in a master page, and when I access a page using that master, I get the error:
An extender can't be in a different UpdatePanel than the control it
extends.
<asp:UpdatePanel ID="UpdatePanel99" runat="server">
<ContentTemplate>
<script type="text/javascript">
function OnAutoCompleteSelected(source, eventArgs) {
$("#autoCompleteHidden").val(eventArgs._text);
__doPostBack("autoCompleteHidden", "");
}
</script>
<table>
<tr>
<td style="height: 25px">Search By
</td>
<td>
<asp:DropDownList ID="ddlSearchBy" runat="server" OnSelectedIndexChanged="ddlSearchBy_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem>Emp No</asp:ListItem>
<asp:ListItem>ID No</asp:ListItem>
<asp:ListItem>Surname</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:ImageButton ID="imgBtnSearch" runat="server" Height="20px" ImageUrl="~/Images/Apps/mySearch2.png"
Width="20px" OnClick="imgBtnSearch_Click" />
</td>
</tr>
<tr>
<td colspan="3" style="height: 25px; margin-left: 80px;">
<div>
<asp:HiddenField runat="server" ID="autoCompleteHidden" OnValueChanged="autoCompleteHidden_ValueChanged" />
<asp:TextBox ID="txtSearchField" runat="server" Width="200px"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" TargetControlID="txtSearchField"
ServicePath="~/AutoComplete.asmx" ServiceMethod="GetEmployees" Enabled="False" CompletionInterval="100"
MinimumPrefixLength="1" CompletionSetCount="10000" OnClientItemSelected="OnAutoCompleteSelected"
CompletionListCssClass="CompletionList" CompletionListItemCssClass="CompletionListItem" CompletionListHighlightedItemCssClass="CompletionListHighlightedItem">
</ajaxToolkit:AutoCompleteExtender>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
There is only one UpdatePanel on the master page, and the extended control, txtSearchField is contained well within it only. What am I doing wrong?

I found another AutoCompleteExtender for the same textbox outside of the UpdatePanel.

Related

Server side events not firing the first time when asp validator used into the page

I am created a page with update panel and used Asp.net validation controls to be
validated the page is making an issue is "i am straightly going to submit the page
and page gets validated properly then, i am going to click/select any controls on
the page is not get post back"
The below code i am used
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="divMyDataManualEntry" runat="server">
<table cellpadding="3" cellspacing="0" border="0" width="100%">
<td style="width: 5%;" valign="top">
<asp:Label ID="lblGeo" Font-Bold="true" runat="server" Text="Geography"></asp:Label><span
class="redtext">*</span>
</td>
<td valign="top" style="width: 15%">
<asp:DropDownList ID="ddlgeo" TabIndex="1" runat="server" CssClass="textbox" Width="100%"
OnSelectedIndexChanged="ddlgeo_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="ddlgeo"
ValidationGroup="Submit" InitialValue="-1" ErrorMessage="Select Geography"></asp:RequiredFieldValidator>
</td>
</tr> </table>
<table width="100%" id="BtnContainer" runat="server">
<tr>
<td align="center">
<asp:Button ID="btnSubmit" runat="server" OnClientClick="javascript:return IsValidated();"
ValidationGroup="Submit" CssClass="Keybutton" TabIndex="14" Text="Submit" OnClick="btnSubmit_Click" />
<asp:Button ID="btnreset" runat="server" Text="Reset" CssClass="Keybutton" TabIndex="15"
OnClick="btnReset_click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Ajax UpdatePanel not working in IE9

I am using updatepanel to avoid the postback and the code is working fine in IE8 and firefox but not in IE9. I also tried installing latest ajax toolkit from codeplex but it did not help me either.Please help me with this. My code is something like below/....
<table width="800px">
<tr>
<asp:UpdatePanel runat="server" ID="upCountry">
<ContentTemplate>
<td class="TextLabelForHeader" width="300px">
Country:
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="ddlCountry"
ErrorMessage="*" InitialValue="Select.." ValidationGroup="VGHeader"></asp:RequiredFieldValidator>
</td>
<td align="left">
<asp:DropDownList ID="ddlCountry" runat="server" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"
AutoPostBack="true" OnDataBound="ddlCountry_DataBound" onchange="SelectCurrency(this);"
ValidationGroup="VGHeader">
</asp:DropDownList>
</td>
<td align="left">
</td>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
<tr>
<asp:UpdatePanel runat="server" ID="upCurrency">
<ContentTemplate>
<td class="TextLabelForHeader" width="300px">
Currency:
</td>
<td align="left">
<asp:DropDownList ID="ddlCurrency" runat="server" ValidationGroup="VGHeader">
</asp:DropDownList>
</td>
<td align="left">
</td>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
<tr>
<td class="TextLabelForHeader" width="300px">
Client:
<%--<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="ddlClient" ErrorMessage="*" InitialValue="Select.."
ValidationGroup="VGHeader"></asp:RequiredFieldValidator>--%>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtClient"
ErrorMessage="*" ValidationGroup="VGHeader"></asp:RequiredFieldValidator>
</td>
<td align="left">
<%-- <asp:DropDownList ID="ddlClient" runat="server" Height="16px" Width="143px" Enabled="false"
OnDataBound="ddlClient_DataBound" onchange="DisplayTextbox(this);" ValidationGroup="VGHeader">
</asp:DropDownList>--%>
<asp:TextBox ID="txtClient" runat="server" Width="143px" ReadOnly="true" ValidationGroup="VGHeader"></asp:TextBox>
<%--<div id="form_ProductContainer" style="display: none;">
<asp:TextBox ID="txtNewClientName" runat="server"></asp:TextBox>
</div>--%>
</td>
<td class="TextLabelForHeader" style="text-align: left;">
<asp:Button ID="btnContinue" runat="server" OnClick="btnContinue_Click" Text="Continue"
ValidationGroup="VGHeader" />
</td>
</tr>
</table>
Discussion: Is it vital that it uses IE9 as is? If it isn't then you could just force it to render as IE8 with the following code inserted in the head section of the page or master page.
Possible Solution:
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
Updated Response
Identified Issue: I had a look at your code and you have no update Panel inside the last TR element. I imagine now that the code originally worked in IE8 because you probably had another update panel that covered the entire table.

ASP.NET When using updatepanel should the page refresh?

I have follow two listboxes and and a left and right button.. which are contained in a updatepanel. The only problem is when clicking on the left or right button the page refreshes which is not desired.
<asp:UpdatePanel runat="server" ID="ExportUpdatePanel">
<ContentTemplate>
<div class="exportWrapper">
<table class="exportFilter">
<tr>
<td>
<h2>
<%= ExportSelectDateLabel %></h2>
</td>
</tr>
<tr>
<td>
<label>
<%= ExportFromDateLabel %></label>
<asp:TextBox runat="server" ID="exportFilterFromDate" CssClass="exportDates"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<label>
<%= ExportToDateLabel %></label>
<asp:TextBox runat="server" ID="exportFilterToDate" CssClass="exportDates"></asp:TextBox>
</td>
</tr>
</table>
<table class="exportFilter">
<tr>
<td colspan="3">
<h2>
<%= ExportSelectColumnsLabel %></h2>
</td>
</tr>
<tr>
<td>
<label>
<%= ExportAvailableColumnLabel %></label>
</td>
<td>
</td>
<td>
<label>
<%= ExportSelectedColumnLabel %></label>
</td>
</tr>
<tr>
<td>
<asp:ListBox runat="server" ID="exportFilterAvailableColumns" SelectionMode="Multiple" CssClass="exportListBox">
</asp:ListBox>
</td>
<td class="exportButtonsTd">
<div>
<asp:LinkButton runat="server" OnClick="MoveSelectedClick"><span><img src="/images/source/arrow-right.png" alt="Move Right"/></span></asp:LinkButton>
</div>
<div class="mt_10">
<asp:LinkButton runat="server" OnClick="RemoveSelectedClick"><span><img src="/images/source/arrow-left.png" alt="Move Left"/></span></asp:LinkButton>
</div>
</td>
<td id="exportedSelectedColumn">
<asp:ListBox runat="server" ID="exportFilterSelectedColumns" SelectionMode="Multiple" CssClass="exportListBox">
</asp:ListBox>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Any ideas ?
As per your code ExportUpdatePanel section will refresh when you click on link button inside UpdatePanel. it is not full page refresh. default update mode of update panel is always. that means:
the UpdatePanel control's content is updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside other UpdatePanel controls and postbacks from controls that are not inside UpdatePanel controls.
here is sample test:
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
On click event both Label1 and Label2 will update.
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
Label2.Text = DateTime.Now.ToLongTimeString();
}
but only Label2 will change because it will refresh by the update panel.
Before using update panels, please read some article on how update panels work. For example, this one: http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers
Add UpdateMode="Conditional" and ChildrenAsTriggers="true" attributes to your update panel, and it should work as you want.
<asp:UpdatePanel runat="server"
ID="ExportUpdatePanel"
UpdateMode="Conditional"
ChildrenAsTriggers="true">

Couldn't find updatepanel inside hidden div

I have an Updatepanel inside hidden Div, but I am getting "Could not find UpdatePanel with ID 'ctl00_ContentPlaceHolder_ctl04_UpdatePanel1'. I am trying to show and hide this panel from code behind. Thanks for any help. Here is my code.
<div id="div1" runat="server" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
you can only manipulate the the code inside the ContentTemplate from the updatepanel's postbacks, so the "div1"s display property can't be changed by the updatepanel's postbacks.
you could move the div inside the updatepanel and then it should work
I'd try this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" id="div1" runat="server" style="display:none">
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
<asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Keep in mind the client id of div1 will no longer be div1 (unless your using .net 4 in which case you can specify that it is'div1') you can fix this a variety of ways but basically you just need to add a little bit of javascript to the page that associates the actual WebControl.ClientID with 'div1'.

asp.net model popup extender

I am using ajax model popup extender in my asp.net page. From my page , on click of Save button , i popup panel using model popup extender.
If i cause postback from model popup , my backend (asp.net) form controls are coming front (ie) in the panel.
Here is my code snippet,
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up_Save" runat="server">
<ContentTemplate>
<div>
<table border="0" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td align="center" colspan="4">
<asp:Button ID="btn_Save" runat="server" Text="Save" Width="15%" OnClick="btn_Save_Click" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<cc1:ModalPopupExtender ID="BarrierRelayPopup" runat="server" PopupControlID="PopUp_Panel" TargetControlID="hiddenfield" CancelControlID="btn_Cancel_PopUp">
</cc1:ModalPopupExtender>
<asp:HiddenField ID="hiddenfield" runat="server" />
<asp:Panel runat="server" ID="PopUp_Panel" Width="50%" Height="30%" BackColor="Gainsboro" BorderStyle="Groove" >
<asp:UpdatePanel runat="server" ID="PopUp">
<ContentTemplate>
<table>
<tr>
<td align="left">
<asp:Label ID="lbl_Heading" runat="server" Text="Select Relay and Barrier :"></asp:Label>
</td>
</tr>
<tr>
<td>
<B_R:Barrier_Relay ID="Barrier_Relay" runat="server"/>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btn_OK" runat="server" Width="60px" Text="OK" OnClick="btn_OK_Click" /> <asp:Button ID="btn_Cancel_PopUp" runat="server" Width="60px" Text="Cancel" OnClick="btn_Cancel_PopUp_Click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
Can anybody help me in this.
If I understand you right I think what you want to do is wrap the controls inside the modal in an updatepanel. This will prevent the modal from closing if you need to do a postback from within the popup.

Resources