We Keep Coding

Asp.NET: How to keep focus on textbox in a nested Update Panel

I am working on making a semi simple post and reply/forum pages in asp.net(with C#). Everything works however when I went to add update panels it makes me want to throw my head into a wall.
I use a DataList to display the posts. I use a form consisting of two textboxes and a button to insert a new post. One textbox if for the name, and the other for the message.
First update panel I added (nested) is to provide a character count for the post. I have a label in the Content and it is triggered by the textboxes textchanged event. The textbox 'txtMessage' also has a java-script function run 'onkeyup' to keep the focus on the textbox when typing. I limit the characters at 1000.
The next update is to surround the DataList so that it does not post back everytime (if not used and the back button is hit it will go back and visually remove each post which is not a good design practice). However when I just put the panel around the DataList it did not postback the insert form so the boxes were not cleared. Which I would like to be done, so I wrapped everything then by this updatepanel, which then made the character count update panel nested by this one. This now works, but the focus is taken off of the txtMessage box each time the textchanged event fires. So the JavaScript is not firing now?
I have moved the opening and closing of the update panel countless times and have tried different fixes, so any further suggestions would help. The code is below.
ForumT.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ForumT.aspx.cs" Inherits="UPE_Site_v1.ForumT" %>
<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headPlaceHolder" runat="server">
<script type="text/javascript">
function reFocus(id) {
__doPostBack(id, '');
document.getElementById(id).blur();
document.getElementById(id).focus();
}
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetPosts" TypeName="TimeTrackerRepository" DataObjectTypeName="System.Guid" DeleteMethod="DeletePost"> </asp:ObjectDataSource>
<asp:UpdatePanel ID="upDataList" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:DataList ID="DataList2" runat="server" CellPadding="4" DataSourceID="ObjectDataSource1"
ForeColor="#333333" OnItemCommand="DataList2_ItemCommand" OnItemDataBound="DataList2_ItemDataBound"
DataKeyField="PostID" OnItemCreated="DataList2_ItemCreated">
<AlternatingItemStyle BackColor="White" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#D4EBD4" />
<ItemTemplate>
<div class="row">
<div class="col-xs-12 col-sm-6">
Name: <strong><%# Eval("Name") %></strong>
</div>
<div class="col-xs-12 col-sm-6">
<%# Eval("TimePosted") %>
</div>
<div class="col-xs-12" style="word-break: break-all">
<%# Eval("Message") %>
</div>
</div>
<br />
<asp:Button ID="btnDelete" CssClass="btn btn-warning" runat="server" Text="Delete" CommandArgument='<%# Eval("PostID") %>' CommandName="DeleteItem" />
<asp:LinkButton CssClass="btn btn-primary" ID="lkbtnFullPost" runat="server" Text="See Full Post" CommandArgument='<%# Eval("PostID") %>' CommandName="FullPost"></asp:LinkButton>
</ItemTemplate>
<SelectedItemStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
</asp:DataList>
</div>
<%--</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPost" EventName="Click" />
</Triggers>
</asp:UpdatePanel>--%>
<br />
<br />
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3">
<p>Add a post to this forum:</p>
<div class="form-group">
<asp:Label ID="Label1" runat="server" Text="Name: "></asp:Label>
<asp:TextBox CssClass="form-control" ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtName"
ErrorMessage="This is a required field." ValidationGroup="Application"
Display="Dynamic" ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
<%--<asp:UpdatePanel ID="upMessage" runat="server" UpdateMode="Conditional">
<ContentTemplate>--%>
<div class="form-group">
<asp:Label ID="Label2" runat="server" Text="Message: "> </asp:Label>
<asp:TextBox onkeyup="reFocus(this.id);" CssClass="form-control" ID="txtMessage" runat="server" TextMode="MultiLine" Rows="4" OnTextChanged="txtMessage_TextChanged"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtMessage"
ErrorMessage="This is a required field." ValidationGroup="Application"
Display="Dynamic" ForeColor="Red">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator runat="server" ControlToValidate="txtMessage"
ErrorMessage="Character limit is 1000 characters."
ValidationGroup="Application" Display="Dynamic" ForeColor="Red"
ValidationExpression=".{0,1000}">
</asp:RegularExpressionValidator>
</div>
<br />
<%--</div>
</div>--%>
<%--</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPost" EventName="Click" />
</Triggers>
</asp:UpdatePanel>--%>
<%--<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3">--%>
<asp:UpdatePanel ID="upMessage" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblCharacterCount" runat="server">0/1000</asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtMessage" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ValidationGroup="Application" CssClass="btn btn-default" ID="btnPost" runat="server" Text="POST IT" OnClick="btnPost_Click" />
<asp:Label ID="lblError" runat="server" Text="" CssClas="Error" ForeColor="Red"></asp:Label>
</div>
</div>
<br />
<br />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
ForumT.aspx.cs
only including the textchanged event
protected void txtMessage_TextChanged(object sender, EventArgs e)
{
lblCharacterCount.Text = txtMessage.Text.Count().ToString() + "/1000";
if (txtMessage.Text.Count() >= 1000)
{
lblCharacterCount.ForeColor = System.Drawing.Color.Red;
}
else
{
lblCharacterCount.ForeColor = System.Drawing.Color.Black;
}
}
Sorry for the code being a little sloppy. Also side not, I am using bootstrap so that is what all of the div's are for

I was facing the same issue as I needed to set focus on the textbox after postbacks in update panel. So I researched over internet & found this Javascript code. I tried it & it is working perfectly. It adds event listener for update panel for before & after postback. Gets textbox id before postback & set it after completion of postback.
var lastFocusedControlId = "";
function focusHandler(e) {
document.activeElement = e.originalTarget;
}
function appInit() {
if (typeof (window.addEventListener) !== "undefined") {
window.addEventListener("focus", focusHandler, true);
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}
function pageLoadingHandler(sender, args) {
lastFocusedControlId = typeof (document.activeElement) === "undefined"
? "" : document.activeElement.id;
}
function focusControl(targetControl) {
if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
var focusTarget = targetControl;
if (focusTarget && (typeof (focusTarget.contentEditable) !== "undefined")) {
oldContentEditableSetting = focusTarget.contentEditable;
focusTarget.contentEditable = false;
}
else {
focusTarget = null;
}
targetControl.focus();
if (focusTarget) {
focusTarget.contentEditable = oldContentEditableSetting;
}
}
else {
targetControl.focus();
}
}
function pageLoadedHandler(sender, args) {
if (typeof (lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
var newFocused = $get(lastFocusedControlId);
if (newFocused) {
focusControl(newFocused);
}
}
}
Sys.Application.add_init(appInit);
Just use this code in your script on aspx page.

You say your javascript is not working. When using update panels and js you will need to rebind your js subscribed events.
Reference: jQuery $(document).ready and UpdatePanels?

FileUpload.HasFile give always false

this is my code where my FileUpload control is outside of update panel but when I click on save button which is under update panel give fileUploadAttachment.HasFile = false
ASPX
<asp:Literal runat="server" ID="lblAttachment" Text="Attachment:" /><asp:FileUpload
ID="fileUploadAttachment" runat="server" Width="488px" />
<asp:UpdatePanel ID="updatePanelAction" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" ValidationGroup="Save" />
<asp:Button ID="btnTest" runat="server" Text="Test" Enabled="false" OnClick="btnTest_Click" />
<asp:Button ID="btnConfirmTest" runat="server" Text="Confirm Test" Enabled="false"
OnClick="btnConfirmTest_Click" />
<asp:Button ID="btnSend" runat="server" Text="Send" Enabled="false" OnClick="btnSend_Click" />
</ContentTemplate>
</asp:UpdatePanel>
CS
protected void btnSave_Click(object sender, EventArgs e)
{
CampaignBAL campaignBAL;
string tmpFileName = "";
User user;
Campaign campaignDetail = new Campaign();
int? campaignID;
if (fileUploadAttachment.HasFile) // return always false
{
tmpFileName = string.Format("{0}\\{1}{2}", Server.MapPath("TempUpload"), Guid.NewGuid(), Path.GetExtension(fileUploadAttachment.PostedFile.FileName));
fileUploadAttachment.PostedFile.SaveAs(tmpFileName);
}
}
please help me how can I fix it

You'll need to add postback triggers for controls that post within the UpdatePanel:
<asp:UpdatePanel ...>
<Triggers>
<asp:PostBackTrigger ControlID="btnSend" />
</Triggers>
...
</asp:UpdatePanel>

You Can Change Your Code in the ASP Page Like This
<asp:updatePanel>
<trigger>
<asp:PostBackTrigger ControlID="btnSend">
</trigger>
<\asp:updatePanel>

Two updatePanels and popup extender which should not disappear after postback

On my MasterPage I have 2 update panels which are surrounded with Panels. Two of them contain 'Details View' controls and some buttons.
On the other hand, I have one UpdatePanel which contains image buttons and link buttons.
The idea is that I'm fetching from the database the messages ( 2 kinds), showing them on the Page. When the user clicks on a button (LinkButton or ImageButton), he or she sees a 'Popup Control'. On the popup control, he or she can see the message details and if needed, cancel them or approve.
Here is where I am stuck. If I remove the ImageButtons from the UpdatePanels, I won't be able to refresh them without a full postback.
Should I have 'popup extensions' in the UpdatePanel with the ImageButtons, but then when I click on the button from 'popup panel' - it disappears ( there is no full postback, it just disappears) - it should just change the DetailsView page.
How do I make it work?
Thanks in advance !
(I need this solution because I want to use a timer to refresh LinkButtons )
here is my code behind :
protected void Page_Load(object sender, EventArgs e)
{
try
{
//here im pulling data from database and binding it with 'details view' controls, its not big deal so i think i don't have to show it?
wyswietl_powiadomienia_o_wydarzeniach();
wyswietl_ilosc_zaproszen_do_przyjaciol();
wyswietl_ilosc_nieodczytanych_wiadomosci();
}
catch (Exception)
{
}
}
protected void ButtonWczesniej_Click(object sender, EventArgs e)
{
DetailsViewEventsRequests.PageIndex = DetailsViewEventsRequests.PageIndex - 1;
ButtonDalej.Enabled = true;
wyswietl_powiadomienia_o_wydarzeniach();
}
protected void ButtonDalej_Click(object sender, EventArgs e)
{
//
DetailsViewEventsRequests.PageIndex = DetailsViewEventsRequests.PageIndex + 1;
ButtonWczesniej.Enabled = true;
wyswietl_powiadomienia_o_wydarzeniach();
}
protected void ButtonInvLeft_Click(object sender, EventArgs e)
{
DetailsViewIfFriends.PageIndex = DetailsViewIfFriends.PageIndex - 1;
}
protected void ButtonInvRight_Click(object sender, EventArgs e)
{
DetailsViewIfFriends.PageIndex = DetailsViewIfFriends.PageIndex + 1;
}
And my aspx: (only one updatepanel with detail's view because 2nd one is very simillar)
<div id="NotifyAreaWhite">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="NotifyAreaDiv">
<div id="NotifyDivMail">
<div id="NotifyLeftMSG"><asp:ImageButton ID="ImageButtonNotifyMsg" runat="server"
ImageUrl="~/images/msg.png" PostBackUrl="~/wiadomosci.aspx"
ToolTip="Wyslij wiadomosc" /></div>
<div class="NotifyRight"> <asp:LinkButton ID="LabelNotifyMsgNo" runat="server" Text="0" Font-Size="Large" PostBackUrl="~/wiadomosci.aspx"/></div>
</div>
<div class="NotifyDiv">
<div id="NotifyLeftFrend" class="NotifyLeft"> <asp:ImageButton ID="ImageButtonNotifyFrends" runat="server"
ImageUrl="~/images/friends.png"
ToolTip="Zaproszenia od znajomych." /></div>
<div id="NotifyRightFrend" class="NotifyRight"><asp:LinkButton ID="LabelNotifyFrendsNo" runat="server" Text="0" Font-Size="Large"/></div>
</div>
<div class="NotifyDiv">
<div id="NotifyLeftWyd" class="NotifyLeft"> <asp:ImageButton ID="ImageButtonWydarzenia" runat="server" ImageUrl="~/images/event.png" ToolTip="Zaproszenia do wydarzen." /></div>
<div id="NotifyRightWyd" class="NotifyRight"> <asp:LinkButton ID="LabelNotifyEventsNo" runat="server" Text="0" Font-Size="Large"/></div>
</div>
</div>
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtender"
runat="server" Enabled="true" OkControlID="ButtonZamknijOkno" CancelControlID="ButtonZamknijOkno"
TargetControlID="ImageButtonWydarzenia" PopupControlID="PanelZaproszeniaEventy"
BackgroundCssClass="NotifyPageTloClass"/> //extender showing Panel
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonZamknijOkno" CancelControlID="ButtonZamknijOkno"
TargetControlID="LabelNotifyEventsNo" PopupControlID="PanelZaproszeniaEventy"
BackgroundCssClass="NotifyPageTloClass"/>
<asp:ModalPopupExtender ID="PanelProsbyOznajomosc_ModalPopupExtender"
runat="server" Enabled="true" OkControlID="ButtonFrendCloseNotifier" CancelControlID="ButtonFrendCloseNotifier"
TargetControlID="ImageButtonNotifyFrends" PopupControlID="PanelProsbyOznajomosc"
BackgroundCssClass="NotifyPageTloClass"/>
<asp:ModalPopupExtender ID="PanelProsbyOznajomosc_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonFrendCloseNotifier" CancelControlID="ButtonFrendCloseNotifier"
TargetControlID="LabelNotifyFrendsNo" PopupControlID="PanelProsbyOznajomosc"
BackgroundCssClass="NotifyPageTloClass"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:Panel ID="PanelZaproszeniaEventy" runat="server" Width="318px" CssClass="NotifyWydTlo" >
<asp:UpdatePanel ID="UpdatePanelZaproszeniaEventy" runat="server" RenderMode="Block">
<ContentTemplate>
<asp:DetailsView ID="DetailsViewEventsRequests" runat="server" DataKeyNames="Charakterystyka" AutoGenerateRows="False" Height="17px" Width="313px" HorizontalAlign="Center" onitemcreated="DetailsViewEventsRequests_ItemCreated">
<Fields>
<asp:BoundField DataField="UserName" HeaderText="Zalozyciel" SortExpression="Nazwisko" />
<asp:BoundField DataField="Miasto" HeaderText="Gdzie?" SortExpression="Miasto" />
<asp:BoundField DataField="Data_ZalozeniaWydarzenia" HeaderText="Data wyslania" SortExpression="Miasto" />
</Fields>
<FooterTemplate>
</FooterTemplate>
<HeaderTemplate>
<div>
<div style="float:left;">
<asp:Label ID="LabelNazwaWydarzenia" runat="server"
Text='<%# Eval("Nazwa_Wydarzenia") %>'></asp:Label>
</div>
<div style="float:right; margin-left:5px;">
<asp:Button ID="ButtonZobacz" runat="server" CssClass="myButton" Text="Zobacz Wydarzenie" Font-Size="X-Small" Width="150px" ClientIDMode="AutoID" OnClick="ButtonZobacz_click" UseSubmitBehavior="True"/>
</div>
</div>
</HeaderTemplate>
<EmptyDataTemplate>
<table id="Table1" runat="server" style="border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px; color:#FF5041; margin-left:auto; margin-right:auto;">
<tr>
<td>Nie masz zadnych zaproszen.</td>
</tr>
</table>
</EmptyDataTemplate>
</asp:DetailsView>
<table style="margin-left:auto; margin-right:auto;">
<tr>
<td>
<asp:Button ID="ButtonWczesniej" Width="69px" Height="41px" runat="server" Text="<<" OnClick="ButtonWczesniej_Click" CssClass="myButton" /></td> //button previous msg
<td>
<asp:Button ID="ButtonDalej" Width="69px" Height="41px" runat="server" Text=">>" ///button next msg
OnClick="ButtonDalej_Click" CssClass="myButton"/></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<div style="margin-left:auto; margin-right:auto; width: 112px;">
<asp:Button CssClass="myButton" ID="ButtonZamknijOkno" Width="100%" //button closing popup
Height="41px" runat="server" Text="ZAMKNIJ"/>
</div>
</asp:Panel>
I hope i described it well. Sorry For my weak english and some Polish words in code :)

As i should do at the begining i made this example on empty page and try something else.. mode="Conditional" did the trick.
I should give that code before, not that long one :)
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HyperLink ID="HyperLinkPanelOn" runat="server">click here to show popup</asp:HyperLink>
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonClose" CancelControlID="ButtonClose"
TargetControlID="HyperLinkPanelOn" PopupControlID="Panel1" BackgroundCssClass="NotifyPageTloClass" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="Panel1" runat="server">
<asp:UpdatePanel ID="UpdatePanelPopUp" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="postback" />
<asp:Button runat="server" Text="postback" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="ButtonClose" runat="server" Text="Zamknij" />
</asp:Panel>
So simple.. I thought it's something bigger :/

Default button setting

I have an .aspx page that contains two buttons one is "btnCancel" and another one is "btnSave".
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="Button" OnClick="btnCancel_Click" />
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="Button" OnClick="btnSave_Click"
OnClientClick="tinyMCE.triggerSave(false,true);" ValidationGroup="grp"/>
Now the problem is after filling up some of the textboxes which are present in that page, if I press the "Enter button" the "btnCancel_Click" event is firing instead of "btnSave_Click".
Can any one please suggest me how to set the "btnSave_Click" button as the default one. So that if any one press the "enter button" it will fire the "btnSave_Click" event.
Any help please.
Updated Question:
<asp:Panel DefaultButton="btnSave" runat="server" ID="pnlTest">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="Button" OnClick="btnCancel_Click" />
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="Button" OnClick="btnSave_Click"
OnClientClick="tinyMCE.triggerSave(false,true);" ValidationGroup="grp" />
</asp:Panel>

Set the defaultbutton attribute on the containing panel:
<asp:panel defaultbutton=“btnSave”>
Taken from this blogpost.

put your form controls inside asp.net Panel and set DefaultButton to your button id
Example:
<asp:Panel DefaultButton="btnSave">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="Button" OnClick="btnCancel_Click" />
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="Button" OnClick="btnSave_Click"OnClientClick="tinyMCE.triggerSave(false,true);" ValidationGroup="grp"/>
</asp:Panel>

you can simply use javascript
<script language="javascript" type="text/javascript" >
function button_click(objTextBox,objBtnID)
{
if(window.event.keyCode == 13)
{
document.getElementById(objBtnID).focus();
document.getElementById(objBtnID).click();
}
}
</script>
add this in your page load event
this.TextBox1.Attributes.Add("onkeypress", "button_click(this,'" + this.btnSave.ClientID + "')");

we can set the "defaultbutton" property in the form tag

set this javascript to header
function checkKey(b1, e) {
if (e.keyCode == 13) {
//alert(e.keyCode + 'validation.js');
document.getElementById(b1).click();
return false;
}
}
and set attributes to control
txtboxname.Attributes.Add("onkeypress", "javascript:return checkKey('" + buttonName.ClientID + "',event);");

ASP.NET: ModalPopupExtender prevents button click event from firing

Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen:
Display a ModalPopup to prevent the user from pressing any buttons or changing values
Call my code behind method, hiding the ModalPopup when finished
Here is the ASP markup:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlHidden" runat="server" style="display: none;">
<div>
<h1>Saving...</h1>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalPopup"
BackgroundCssClass="modalBackground" runat="server"
TargetControlID="btnSaveData" PopupControlID="pnlHidden"
BehaviorID="ShowModal">
</cc1:ModalPopupExtender>
<asp:Button ID="btnSaveData" runat="server" Text="Save Data"
OnClick="btnSaveData_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Now, here is my code behind C# code:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.Enabled = false;
}
Why doesn't this work? The ModalPopup displays perfectly, but the btnSaveData_Click event NEVER fires.
UPDATE: The first suggestion did not work for me. I also tried your second suggestion (insofar as it applied to me). One minor difference on my end is that there is no button on my modal panel (pnlHidden) -- it's just a message. I did try using Javascript events on the client side, which at least did fire concurrently with my server-side event. This was good news, but I can't seem to find or grab a handle on the ModalPopupExtender or its BehaviorID. This doesn't work:
function showOverlay() {
var popup = $find('modalPopup');
popup.show();
}
popup is ALWAYS equal to null.
FINAL UPDATE: This is my final solution for getting this to work (Take specific note of the use of OnClientClick AND OnClick):
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlHidden" runat="server" style="display: none;">
<div>
<h1>Saving...</h1>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalPopup"
BackgroundCssClass="modalBackground" runat="server"
TargetControlID="hdnField" PopupControlID="pnlHidden"
BehaviorID="ShowModal">
<asp:HiddenField ID="hdnField" runat="server" />
</cc1:ModalPopupExtender>
<asp:Button ID="btnSaveData" runat="server" Text="Save Data"
OnClientClick="showModal();" OnClick="btnSaveData_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Using this Javascript function:
function showModal() { $find('ShowModal').show(); }
... And this code behind:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.hide();
}

Try this.
Create a dummy hidden field:
<asp:HiddenField ID="hdnField" runat="server" />
Set the TargetcontrolID = "hdnField" in your Modal Popup declaration.
In your btnSaveData_Click event, do this:
modalPopup.Show();

Try this. It is 100% working
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
<asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<input type="button" value="Get" onclick="abc()" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Server side code
protected void Btnshow_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Show();
}
protected void BtnHide_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Hide();
}

First attempt: Try to set your ButtonID into OkControlID Tag and try again
OR
Second attempt: Call your event over javascript there seems to be some problems with click events
<div>
<cc1:ModalPopupExtender PopupControlID="Panel1"
ID="ModalPopupExtender1"
runat="server" TargetControlID="LinkButton1" OkControlID="Ok"
OnOkScript="__doPostBack('Ok','')">
</cc1:ModalPopupExtender>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />
</asp:Panel>

From this example you can easily control panel show up depends on conditions instead of just immediately show up panel once you click button.
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click"/>
<asp:HiddenField ID="hdnField" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server"
TargetControlID="hdnField"
ID="btnAdd_ModalPopupExtender"
PopupControlID="pnlPrintName">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPrintName" runat="server">
.
.
</asp:Panel>
//Server side code:
protected void btnAdd_Click(object sender, EventArgs e)
{
if( dt.Rows.Count == 0 )
{
btnAdd_ModalPopupExtender.Show();
}
else
{
add();
}
}

In code behind, you can do this:
if (true)
{
var script = #"Sys.Application.add_load(function() { $find('behavoirIDModal').show(); });";
ScriptManager.RegisterStartupScript(this, GetType(), "Show", script, true);
}
Change this 'behavoirIDModal'