I have defined an <asp:UpdatePanel> with an <asp:UpdateProgress> as
<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="update1" runat="server">
<ContentTemplate>
<asp:Label id="lblresult" runat="server"></asp:Label><br /><br />
<asp:Button ID="btn1" runat="server" Text="Refresh" OnClick="btn1_Click" /> <br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="up1" runat="server" AssociatedUpdatePanelID="update1">
<ProgressTemplate>
<span style="color:green; font-style:italic;">Loading, please wait...</span>
</ProgressTemplate>
</asp:UpdateProgress>
The button event is defined as
protected void btn1_Click(object sender, EventArgs e)
{
lblresult.Text = "<span style='color:red;'>"+ DateTime.Now.ToString() +"</span>";
}
However, I do not get the Loading, please wait...
<script type="text/javascript">
var updateProgress = null;
function postbackButtonClick() {
updateProgress = $find("<%= uprMaster.ClientID %>");
window.setTimeout("updateProgress.set_visible(true)", updateProgress.get_displayAfter());
return true;
}
</script>
<asp:Button runat="server" Text="Search" ID="btnSearch" OnClick="btnSearch_Click" ClientIDMode="Static" OnClientClick="return postbackButtonClick();" />
put the update progress inside
like this
<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="update1" runat="server">
<ContentTemplate>
<asp:UpdateProgress ID="up1" runat="server" AssociatedUpdatePanelID="update1">
<ProgressTemplate>
<span style="color:green; font-style:italic;">Loading, please wait...</span>
</ProgressTemplate>
<asp:Label id="lblresult" runat="server"></asp:Label><br /><br />
<asp:Button ID="btn1" runat="server" Text="Refresh" OnClick="btn1_Click" /> <br />
</ContentTemplate>
</asp:UpdatePanel>
</asp:UpdateProgress>
Related
I have few textboxes in an update panel. On button click the values of textboxes is inserted into the database. I want the values to get cleared once the data has been inserted into the database.
PS: I tried to clear the values using a function after calling it once the data has been inserted. It doesn't work.
ASP
<%# Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeBehind="CalenderTest.aspx.cs" Inherits="DynamicCalender.CalenderTest" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 363px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager>
<div>
<div>
<asp:Label ID="lbl_year" runat="server" Text="Year"></asp:Label>
<asp:DropDownList ID="ddl_year" runat="server"></asp:DropDownList>
<asp:Label ID="lbl_train" runat="server" Text="Training"></asp:Label>
<asp:DropDownList ID="dd1_training" runat="server"></asp:DropDownList>
<asp:Button ID="btnsave" runat="server" Text="Create Batches" OnClick="btnsave_Click"/>
<br />
<br />
<asp:UpdatePanel ID="pnl1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="ss" runat="server" Text="session"></asp:Label>
<asp:Label runat="server" Text="Venue"></asp:Label>
<asp:TextBox ID="venue" runat="server" CausesValidation="false"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Time"></asp:Label>
<asp:DropDownList ID="ddltime" runat="server" ></asp:DropDownList>
<asp:Label ID="Label2" runat="server" Text="Faculty"></asp:Label>
<asp:TextBox ID="faculty" runat="server" CausesValidation="false"></asp:TextBox>
<asp:Label ID="Label3" runat="server" Text="Module Details"></asp:Label>
<asp:TextBox TextMode="MultiLine" id="module_det" runat="server" CausesValidation="false"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Add" OnClick="Button1_Click" />
<asp:Button id="Button2" runat="server" Text="Next" OnClick="Button2_Click"/>
<asp:TextBox ID="caldt" runat="server" CausesValidation="false"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="caldt"></asp:CalendarExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<asp:HiddenField ID="hd01" runat="server" />
<asp:HiddenField ID="hd02" runat="server" />
</div>
</div>
C#
protected void Button1_Click(object sender, EventArgs e)
{
sess_datetime = caldt.Text + " " + ddltime.SelectedItem.Value.ToString();
str1 = "Insert into sessDetail (tid,bid,sid,dt,faculty,venue,status) values(#tid,#bid,#sid,#dt,#faculty,#venue,#status)";
cmd = new SqlCommand(str1, con);
cmd.Parameters.Clear();
cmd.Parameters.AddWithValue("#tid", dd1_training.SelectedItem.Value);
cmd.Parameters.AddWithValue("#bid",Session["bid"]);
cmd.Parameters.AddWithValue("#sid",Session["sid"]);
cmd.Parameters.AddWithValue("#dt", sess_datetime);
cmd.Parameters.AddWithValue("#faculty", faculty.Text);
cmd.Parameters.AddWithValue("#venue", venue.Text);
cmd.Parameters.AddWithValue("#status", "0");
cmd.ExecuteNonQuery();
con.Close();
clear();
}
protected void clear
{
try
{
foreach (var pnl in pnl1.Controls)
{
var tb = pnl as TextBox;
if (tb != null)
{
tb.Text = "";
}
}
ddltime.ClearSelection();
}
catch(Exception x)
{
Response.Write(x.Message);
}
}
Wrap the Controls inside the UpdatePanel with a PlaceHolder and use that for the foreach loop.
<asp:UpdatePanel ID="pnl1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
Code behind
foreach (var pnl in PlaceHolder1.Controls)
{
//clear controls
}
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?
I have a page with several UpdatePanel controls, each with a related UpdateProgress. When the asynchronous requests are posted back, only the first UpdateProgress control is displayed. The other requests complete successfully, but the UpdateProgress is not shown.
How can I get all the update panels on the page to show properly?
Here is a example that shows the problem (sorry it's a bit long):
aspx file:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Enabled="true" Interval="1000" />
<asp:Label ID="Label1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>Updating...</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Timer ID="Timer2" runat="server" OnTick="Timer2_Tick" Enabled="true" Interval="2000" />
<asp:Label ID="Label2" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>Updating...</ProgressTemplate>
</asp:UpdateProgress>
codebehind:
protected void Timer1_Tick(object sender, EventArgs e) {
System.Threading.Thread.Sleep(1000);
Timer1.Enabled = false;
Label1.Text = DateTime.Now.ToString("HH:mm:ss");
}
protected void Timer2_Tick(object sender, EventArgs e) {
System.Threading.Thread.Sleep(1000);
Timer2.Enabled = false;
Label2.Text = DateTime.Now.ToString("HH:mm:ss");
}
I just discovered that everything works as expected if I put the UpdateProgress before the corresponding UpdatePanel...
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>Updating...</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Enabled="true" Interval="1000" />
<asp:Label ID="Label1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
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 :/
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'