I have a modal popup extender which fires on a button click ... now irrespective on the onclientclick function return value true/false its always poping up. I need to stop the modal to fire on return of false and modal to fire the return to true..how to do this?
Please find the code below :
<div style="text-align:center;" runat="server" id="pnlButton">
<asp:Button CssClass="button" ID="btnBack" runat="server" Text="Back"
Width="120px" onclick="btnBack_Click" UseSubmitBehavior="false" />
<asp:Button CssClass="button" ID="btnCancel" runat="server"
Text="Cancel Request" Width="130px" onclick="btnCancel_Click" onClientClick="Validate();" />
</div>
<div style="text-align:center;">
<asp:Button CssClass="button" ID="btnDone" Visible="false" runat="server"
Text="Done" Width="110px" onclick="btnDone_Click" />
</div>
<ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server"
TargetControlID="btnCancel"
DisplayModalPopupID="ModalPopupExtender1"
ConfirmText="Are you sure you want to click this?" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel"
PopupControlID="PNL" OkControlID="ButtonOk" CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="PNL" runat="server" Style="display: none; width: 400px; background-color: White;
border-width: 2px; border-color: Black; border-style: solid; padding: 20px;">
<h2>Are you sure you want to cancel this request?</h2>
<br />
<br />
<div style="text-align: right;">
<asp:Button ID="ButtonOk" runat="server" Text="Yes" CssClass="button" />
<asp:Button ID="ButtonCancel" runat="server" Text="No" CssClass="button" />
</div>
</asp:Panel>
You can open Popup from javascript
function ValidateAndOpen(){
if(Validate()){
var modalDialog = $find("ModalPopupExtender1");
// get reference to modal popup using the AJAX api $find() function
if (modalDialog != null) {
modalDialog.show();
}
}
return false;
}
You must set ClientIDMode="Static" on ModalPopupExtender
and set OnClientClick="return ValidateAndOpen();"
change you code to the following
onClientClick="return Validate();"
Put this script onto your form:
function pageLoad(sender, args) {
if (args.get_isPartialLoad() === false) {
$find("<%= ModalPopupExtender1.ClientID %>").add_showing(function (sender, args) { args.set_cancel(Validate()); });
}
}
Related
1My first question ever here, forgive if I am not fluent in tech language because I am a self taught developer from deep Africa Mozambique, thanks to this site.
My question is I have a
public void topicView_ItemDataBound(object sender,e)
In my code behind for a particular aspx page with a repeater, that receives its info from a datatable (if my terminology is correct.) The ItemDataBound event is to arrange my controls in a repeater for the purpose of hiding, disabling and showing other controls according to the determined criterias. Now I have noticed that the ItemDataBound event is slowing my page load time by some 20 to 40 seconds which is really bad, even on post back. When i remove the ItemDataBound events. I am running smoothly. But i can't work with out the ItemDataBound event since its the only way i know how to arrange a repeater with alternating conditions. Is this a common problem with a quick answer or should i post my full code?? this only happens on 2 pages with this event. I am using c# if thats of any help. net.4.5
public void topicView_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
// Show or hid div here
HiddenField MediaType = (HiddenField)e.Item.FindControl("MediaType");
HiddenField PageAdmin = (HiddenField)e.Item.FindControl("PageAdmin");
HiddenField f1 = (HiddenField)e.Item.FindControl("F1");
HiddenField PP = (HiddenField)e.Item.FindControl("PP");
HiddenField isread= (HiddenField)e.Item.FindControl("isread");
HiddenField tread = (HiddenField)e.Item.FindControl("tread");
// Label Label2 = (Label)e.Item.FindControl("Label2");
// Label2.Text = myDDL.Value;
System.Web.UI.HtmlControls.HtmlContainerControl image_video = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("image_video");
System.Web.UI.HtmlControls.HtmlContainerControl image_pic = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("image_pic");
System.Web.UI.HtmlControls.HtmlContainerControl PP1 = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("PP1");
System.Web.UI.HtmlControls.HtmlContainerControl userpic = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("userpic");
System.Web.UI.HtmlControls.HtmlContainerControl compic = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("compic");
System.Web.UI.HtmlControls.HtmlContainerControl userpic2 = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("userpic2");
System.Web.UI.HtmlControls.HtmlContainerControl compic2 = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("compic2");
System.Web.UI.HtmlControls.HtmlContainerControl pf = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("pf");
System.Web.UI.HtmlControls.HtmlContainerControl attach = (System.Web.UI.HtmlControls.HtmlContainerControl)e.Item.FindControl("attach");
LinkButton LinkButton3 = (LinkButton)e.Item.FindControl("LinkButton3");
LinkButton LinkButton1 = (LinkButton)e.Item.FindControl("LinkButton1");
Label Label4 = (Label)e.Item.FindControl("Label4");
Label Label10 = (Label)e.Item.FindControl("Label10");
System.Web.UI.WebControls.Image readsign = (System.Web.UI.WebControls.Image)e.Item.FindControl("readsign");
System.Web.UI.WebControls.Image Image2 = (System.Web.UI.WebControls.Image)e.Item.FindControl("Image2");
if (MediaType.Value == "video")
{
image_video.Visible = false;
image_pic.Visible = true;
Image2.ImageUrl = "~/images/readmail.png";
}
if (MediaType.Value == "image")
{
image_video.Visible = true;
image_pic.Visible = false;
}
if (MediaType.Value == "" ) { attach.Visible = false; } else { attach.Visible = true; }
if (PageAdmin.Value == "False")
{
compic.Visible = false;
userpic.Visible = true;
userpic2.Visible = true;
compic2.Visible = false;
}
if (PageAdmin.Value == "True")
{
userpic.Visible = false;
compic.Visible = true;
userpic2.Visible = false;
compic2.Visible = true;
}
if (isread.Value == "True")
{
readsign.ImageUrl = "~/images/readmail.png";
Label4.Text = "foi lido ";
Label10.Text = tread.Value;
}
}
}
and my aspx code for the repeater:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"
OnItemDataBound="topicView_ItemDataBound"><ItemTemplate>
<div id="messages" style="margin-bottom: 10px">
<asp:HiddenField ID="Status" runat="server"
Value='<%#""+Eval("Isreplyed") %>' />
<asp:HiddenField ID="Pageadmin" runat="server"
Value='<%#""+Eval("PageAdmin") %>'/>
<asp:HiddenField ID="MediaType" runat="server"
Value='<%#""+Eval("MediaType") %>' />
<asp:HiddenField ID="isread" runat="server" Value='<%#""+Eval("Isread")
%>' />
<asp:HiddenField ID="tread" runat="server" Value='<%#""+Eval("tread","
{0:d / MM " + "#" + " HH:mm}") %>' />
<div id="Omsg" style="padding: 5px; border: thin solid #FFFFFF; box-
shadow:rgba(255, 255, 255,0.9) 0 0 7px; background-color: #FFFFFF;border-
radius:5px; " >
<table style="width: 100%; text-align: left; margin-left: 0px;">
<tr><td colspan="2">
<asp:Image ID="readsign" runat="server" Height="25" Width="25"
ImageUrl="~/images/newmail.png" />
<asp:Label ID="Label4" runat="server" Text='<%# ""+Eval("Isreplyed")
%>' Font-Size="X-Small" ForeColor="#999999"></asp:Label>
<asp:Label ID="Label10" runat="server" Text='<%#""+Eval("datesent","{0:d /
MM " + "#" + " HH:mm}") %>' Font-Size="X-Small" ForeColor="#999999">
</asp:Label>
</td></tr>
<tr>
<td style="width: 66px; text-align: left;"><a id="pps" ><div
id="compic" ClientIDMode="Static" runat="server"><img id="PP1" alt=""
class="img-rounded" src='<%#"/ProfilePictures/"+Eval("logo") %>'
style="width: 50px; height: 50px" /></div><input id="Hidden2" type="hidden"
runat="server" value='<%#"/ProfilePictures/"+Eval("logo") %>' /></a>
<div id="userpic" clientidmode="Static" runat="server">
<img alt="" class="img-circle"
src='<%#"/ProfilePictures/"+Eval("ProfilePicture") %>' style="width: 50px;
height: 50px" />
</div><input id="Hidden3" type="hidden" runat="server"
value='<%#"/ProfilePictures/"+Eval("ProfilePicture") %>' />
</td>
<td style="line-height: 15px"> <div id="compic2"
ClientIDMode="Static" runat="server"> <a href='<%#"/Landing.aspx?
Restid="+Eval("id") %>' ><asp:Label ID="Label2" class="head" runat="server"
Text='<%# ""+Eval("name") %>' Font-Size="Medium" ForeColor="#B9A47B">
</asp:Label> </a><a/><br/>
<asp:Label ID="CName" runat="server"
Text='<%#""+Eval("slogan") %>' Font-Size="Smaller"></asp:Label>. ...</div>
<div id="userpic2" ClientIDMode="Static"
runat="server"><a href='<%#"/Landing.aspx?Restid="+Eval("Username") %>' >
<asp:Label ID="Label8" class="head" runat="server"
Text='<%#""+Eval("Username") %>' Font-Size="Large" ForeColor="#B9A47B">
</asp:Label> <a/><br/>
<asp:Label ID="Label9" runat="server"
Text='<%#""+Eval("Job") %>' Font-Size="Smaller"></asp:Label></a>
<br />
<a/>
<a href='<%#"notificationmaster.aspx?BlogId="+Eval("Blogid") %>'> <asp:Label
ID="Label5" runat="server" Text='<%# "Respondendo à publicação :
"+Eval("BlogTitle") %>' Font-Size="smaller" ForeColor="#B9A47B"></asp:Label>
</a><br/>
</div>
<a/><span style="font-size: x-small; color: #999999">
enviado : </span><asp:Label ID="Label3" runat="server"
Text='<%#""+Eval("datesent","{0:d MMMM yyyy - HH:mm}") %>' Font-Size="X-
Small" ForeColor="#999999"></asp:Label></a>
<br />
<div id="attach" ClientIDMode="Static" runat="server" >
<asp:Label ID="Label17" runat="server" Text="Esta mensagem tem anexo"
ForeColor="#999999" Font-Size="X-Small" Font-Underline="True">
</asp:Label> <img alt="" src="images/attach.png" style="width: 20px;
height: 20px" /></div>
</td>
</tr>
<tr>
<td colspan="2">
<br/>
<div id="msgbody" style="display: none">
<asp:Label ID="Label1" runat="server" Text='<%#""+Eval("mbody") %>'>
</asp:Label><br/>
<div id="image_pic" ClientIDMode="Static" runat="server" >
<asp:HiddenField ID="HiddenField1" runat="server"
Value='<%#"/PostImages/"+Eval("image") %>' />
<asp:Image ID="Image1" class="img-thumbnail" ClientIDMode="Static"
runat="server" ImageUrl='<%#"/PostImages/"+Eval("image") %>' alt="Broken"
Width="100%" />
</div>
<div id="image_video" runat="server" onclick="AddView" >
<video id="PostVedio" runat="server" controls
poster="/images/chimoioonline.png" src='<%#"/video/"+Eval("video") %>'
style="width: 100%">
<source src="demo.mp4" type="video/mp4" />
<source src="demo.webm" type="video/webm"/>
<source src="demo.ogv" type="video/ogg"/>
<source src="demo.ogv" type="video/avi"/>
<p>Fallback code if video isn't supported</p>/
</video></div></div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<hr style="padding: 2px; margin: 5px" />
<div id="deletm" style="display: inline-block">
<input id="Hidden1" type="hidden" runat="server"
value='<%#Eval("id")%>' />
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn"
onclick="pmdelet" BorderColor="#CCCCCC" BorderWidth="1px"><img
src="/images/delete.png" alt="" style=" height: 15px" />
</asp:LinkButton> <br />
</div>
<div id="sendpm" style="display: inline-block">
<input id="mido" type="hidden" runat="server"
value='<%#Eval("id")%>' />
<input id="Hidden4" type="hidden" runat="server"
value='<%#Eval("BlogId")%>' />
<input id="sender2" type="hidden" runat="server"
value='<%#Eval("sender")%>' />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn"
BorderColor="#CCCCCC" BorderWidth="1px" OnClientClick=""
PostBackUrl='<%#"PMS.aspx?id=" + Eval("id") + "&BlogId=" + Eval("BlogId")+
"&sender=" + Eval("sender")%>' ><img src="images/pvtemail.png" alt=""
style=" height: 15px" /></asp:LinkButton>
</div>
<div id="read" style="display: inline-block">
<input id="H5" type="hidden" runat="server"
value='<%#Eval("id")%>' />
<input id="H7" type="hidden" runat="server"
value='<%#"/ProfilePictures/"+Eval("logo") %>' />
<input id="H8" type="hidden" runat="server"
value='<%#"/ProfilePictures/"+Eval("ProfilePicture") %>' />
<input id="H6" type="hidden" runat="server"
value='<%#Eval("Isreplyed")%>' />
<input id="H14" type="hidden" runat="server"
value='<%#Eval("Username")%>' />
<input id="H10" type="hidden" runat="server"
value='<%#Eval("name")%>' />
<input id="H13" type="hidden" runat="server"
value='<%#Eval("Subject")%>' />
<input id="H9" type="hidden" runat="server"
value='<%#Eval("BlogTitle")%>' />
<input id="H11" type="hidden" runat="server"
value='<%#Eval("datesent","{0:d / MM " + "#" + " HH:mm}")%>' />
<input id="H12" type="hidden" runat="server"
value='<%#Eval("mbody")%>' />
<input id="v5" type="hidden" runat="server" value='<%#
Eval("video")%>' />
<input id="p5" type="hidden" runat="server"
value='<%#Eval("image")%>' />
<input id="sender" type="hidden" runat="server"
value='<%#Eval("sender")%>' />
<input id="Hidden5" type="hidden" runat="server"
value='<%#Eval("Blogid")%>' />
<input id="PageAdmin2" type="hidden" runat="server"
value='<%#Eval("PageAdmin")%>' />
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn"
BorderColor="#CCCCCC" BorderWidth="1px" OnClientClick="return false"><img
src="/images/read2.png" alt="" style=" height:15px" /></asp:LinkButton>
</div>
</td>
</tr>
</table>
</div>
<div id="Rmsg">
</div>
</div>
</ItemTemplate></asp:Repeater>
My Server profiler screen shot
This is not really an answer, but more a way for you to delve deeper into whats the problem. (And it's to long for a comment)
First of all you need to make sure you have SQL server managment tools installed, in particular you need the tool called SQL server profiler.
In profiler you go to "file" "new trace" and connect to you SQL server.
In the Trace properties you select only "RPC:completed" and "SQL:BatchCompleted".
Now you can run your aspx page, and you should se all SQL queries generated by the page in the profiler. There are two things you should look out for.
First of all, look for long running queries. The duration column is in MS and you should not have anyone longer than 1000ms.
Secondly, the number of queries run when the page is run. A normal page should not exceed 20 queries. Usualy when you get problems with this, you could run hundreds.
I am using 4 Modalpopupextender in my start-up page of my project. When I run my start-up page, the panels which I have set under PopupControlID in Modalpopupextender are visible even before the specified TargetControlID is clicked. I have tried to set visible of those to false but it dint helped me and I also tried to create a css class to hide a panel when page is loaded and to view the panel when specified button is clicked but it neither helped me. Please help. Thank you.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type = "text/css">
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:modalpopupextender ID="Modalpopupextender1" CancelControlID = "Button8" TargetControlID = "Button2" PopupControlID = "StaffSP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender2" CancelControlID = "Button10" TargetControlID = "Button3" PopupControlID = "StaffFP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender3" CancelControlID = "Button12" TargetControlID = "Button5" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender4" CancelControlID = "Button14" TargetControlID = "Button6" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="XX-Large" Text="Automated Examination System"></asp:Label><br /> <br /><br />
<asp:Panel ID = "Main" runat = "server" Height="181px" Width="275px">
<ul>
<li style="margin-removed 33px; width: 169px;"> <asp:LinkButton ID = "LinkAdmin" runat = "server" onclick="LinkAdmin_Click">Coordinator</asp:LinkButton></li>
<li style="width: 172px; margin-removed 33px"> <asp:LinkButton ID="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:LinkButton></li>
<li style="margin-removed 33px"> <asp:LinkButton ID = "LinkStudent" runat = "server">Student</asp:LinkButton>
<ul>
<li><asp:LinkButton ID = "LinkButton1" runat = "server">Fresh Registration</asp:LinkButton></li>
<li><asp:LinkButton ID = "LinkButton2" runat = "server">Re Registration</asp:LinkButton></li>
</ul>
</li>
</ul>
</asp:Panel>
</div>
<asp:Panel ID="StaffLogin" runat="server" Height="59px"
style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px"
Visible="False" Width="275px">
Staff<br />
<asp:Button ID="Button1" runat="server" Text="Login" />
<asp:Button ID="Button2" runat="server" Text="New Staff" />
<asp:Button ID="Button3" runat="server" Text="Fogot Password" />
</asp:Panel>
<asp:Panel ID="AdminLogin" runat="server"
style="z-index: 1; left: 302px; top: 193px; position: absolute; height: 78px; width: 275px"
Visible="False" Width="275px">
Admin<br />
<asp:Button ID="Button4" runat="server" Text="Login" />
<asp:Button ID="Button5" runat="server" Text="New Admin" />
<asp:Button ID="Button6" runat="server" Text="Forgot Password" />
</asp:Panel>
<asp:Panel ID="StaffSP" runat="server" Height="48px" Width="274px">
Staff SP<br />
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" runat="server" Height="48px" Width="274px">
Staff FP<br />
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" runat="server" Height="48px" Width="274px">
Admin SP<br />
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" runat="server" Height="48px" Width="274px">
AdminFP<br />
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TrailPopup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkAdmin_Click(object sender, EventArgs e)
{
AdminLogin.Visible = true;
StaffLogin.Visible = false;
}
protected void LinkStaff_Click(object sender, EventArgs e)
{
AdminLogin.Visible = false;
StaffLogin.Visible = true;
}
}
EDIT :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type = "text/css">
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="XX-Large" Text="Automated Examination System"></asp:Label><br /> <br /><br />
<asp:Panel ID = "Main" runat = "server" Height="181px" Width="275px">
<ul>
<li style="margin-left: 33px; width: 169px;"> <asp:LinkButton ID = "LinkAdmin" runat = "server" onclick="LinkAdmin_Click">Coordinator</asp:LinkButton></li>
<li style="width: 172px; margin-left: 33px"> <asp:LinkButton ID="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:LinkButton></li>
<li style="margin-left: 33px"> <asp:LinkButton ID = "LinkStudent" runat = "server">Student</asp:LinkButton>
<ul>
<li><asp:LinkButton ID = "LinkButton1" runat = "server">Fresh Registration</asp:LinkButton></li>
<li><asp:LinkButton ID = "LinkButton2" runat = "server">Re Registration</asp:LinkButton></li>
</ul>
</li>
</ul>
</asp:Panel>
</div>
<asp:Panel ID="StaffLogin" runat="server" Height="59px"
style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px"
Visible="False" Width="275px">
Staff<br />
<asp:Button ID="Button1" runat="server" Text="Login" />
<asp:Button ID="Button2" runat="server" Text="New Staff" />
<asp:Button ID="Button3" runat="server" Text="Fogot Password" />
</asp:Panel>
<asp:Panel ID="AdminLogin" runat="server" style="left: 302px; top: 193px; position: absolute; height: 78px; width: 275px" Visible="False" Width="275px">Admin<br />
<asp:Button ID="Button4" runat="server" Text="Login" />
<asp:Button ID="Button5" runat="server" Text="New Admin" />
<asp:Button ID="Button6" runat="server" Text="Forgot Password" />
</asp:Panel>
<asp:Panel ID="StaffSP" Visible = "false" runat="server" Height="48px" Width="274px">
Staff SP<br />
<asp:modalpopupextender ID="Modalpopupextender1" CancelControlID = "Button8" TargetControlID = "Button2" PopupControlID = "StaffSP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" Visible = "false" runat="server" Height="48px" Width="274px">
Staff FP<br />
<asp:modalpopupextender ID="Modalpopupextender2" CancelControlID = "Button10" TargetControlID = "Button3" PopupControlID = "StaffFP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" Visible = "false" runat="server" Height="48px" Width="274px">
Admin SP<br />
<asp:modalpopupextender ID="Modalpopupextender4" CancelControlID = "Button14" TargetControlID = "Button6" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" Visible = "false" runat="server" Height="48px" Width="274px">
AdminFP<br />
<asp:modalpopupextender ID="Modalpopupextender3" CancelControlID = "Button12" TargetControlID = "Button5" PopupControlID = "AdminFP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>
</form>
</body>
</html>
Call your css class hide panel in every PopupControl used for modalpopupextender control:
`<asp:Panel ID="StaffSP" runat="server" CssClass="hide" Height="48px" Width="274px" >
Staff SP<br />
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" runat="server" Height="48px" Width="274px" style="display:none;">
Staff FP<br />
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" runat="server" Height="48px" Width="274px" CssClass="hidePanel">
Admin SP<br />
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" runat="server" Height="48px" Width="274px" Visible="false">
AdminFP<br />
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>`
you have put all the 4 TargetControlIDs inside the panels which are not visible
Hi I have an asp updatePanel which contains several asp panels. The way it should function is you click the button in the first panel it hides that panel and shows the next. That works fine the problem comes with the next panel. If I try and use either of the button controls within that panel nothing happens.
Heres the html
<asp:UpdatePanel runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Panel ID="pnlAppRej" runat="server" HorizontalAlign="Center" CssClass="textBox"
Width="85%" Visible="True">
<div style="text-align:left; width:90%">
<asp:Label ID="lblAppRej" runat="server" Text="Label"></asp:Label>
</div>
<asp:Button ID="btnApprove" runat="server" Text="Approve" CssClass="button" Style="margin-right: 20px;
margin-top: 10px" Width="100px" onclick="btnApprove_Click" />
<asp:Button ID="btnReject" runat="server" CssClass="button" Text="Reject" Style="margin-left: 20px"
Width="100px" onclick="btnReject_Click" />
</asp:Panel>
<asp:Panel runat="server" ID="pnlRejCom" Width="85%" Visible="False" CssClass="textBox">
<div style="text-align: left">
Comments<br />
</div>
<asp:TextBox ID="tbRejCom" runat="server" Height="54px" TextMode="MultiLine" Width="95%"
CssClass="textBox" Style="margin-top: 5px" ValidationGroup="rejCom"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbRejCom"
ErrorMessage="RequiredFieldValidator" ValidationGroup="rejCom">*</asp:RequiredFieldValidator>
<br />
<div style="text-align: center">
<asp:Button ID="btnBackRejCom" runat="server" CssClass="button" Text="Back" Style="margin-right: 20px;
margin-top: 10px" Width="100px" />
<asp:Button ID="btnDoneRejCom" runat="server" CssClass="button" Text="Done" Style="margin-left: 20px;
margin-top: 10px" Width="100px" ValidationGroup="rejCom"
onclick="btnDoneRejCom_Click" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
c# code
protected void btnReject_Click(object sender, EventArgs e)
{
pnlRejCom.Visible = true;
pnlAppRej.Visible = false;
}
protected void btnBackRejCom_Click(object sender, EventArgs e)
{
pnlRejCom.Visible = false;
pnlAppRej.Visible = true;
}
its the btnBackRejCom_Click method which doesnt seem to fire. But I have tested setting the pnlRejCom to visible and the method works fine.
Thanks in advance
Charlie
your problem seems to be different.
I would suggest, delete the
protected void btnBackRejCom_Click(object sender, EventArgs e){}
and again create a new event.
This is what i tried and is working fine now.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btnReject" />
<asp:AsyncPostBackTrigger ControlID="btnBackRejCom" />
<asp:PostBackTrigger ControlID="btnDoneRejCom" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlAppRej" runat="server" HorizontalAlign="Center" CssClass="textBox"
Width="85%" Visible="True">
<div style="text-align: left; width: 90%">
<asp:Label ID="lblAppRej" runat="server" Text="Label"></asp:Label>
</div>
<asp:Button ID="btnApprove" runat="server" Text="Approve" CssClass="button" Style="margin-right: 20px; margin-top: 10px"
Width="100px" OnClick="btnApprove_Click" />
<asp:Button ID="btnReject" runat="server" CssClass="button" Text="Reject" Style="margin-left: 20px"
Width="100px" OnClick="btnReject_Click" />
</asp:Panel>
<asp:Panel runat="server" ID="pnlRejCom" Width="85%" Visible="False" CssClass="textBox">
<div style="text-align: left">
Comments<br />
</div>
<asp:TextBox ID="tbRejCom" runat="server" Height="54px" TextMode="MultiLine" Width="95%"
CssClass="textBox" Style="margin-top: 5px" ValidationGroup="rejCom"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbRejCom"
ErrorMessage="RequiredFieldValidator" ValidationGroup="rejCom">*</asp:RequiredFieldValidator>
<br />
<div style="text-align: center">
<asp:Button ID="btnBackRejCom" runat="server" CssClass="button" Text="Back" Style="margin-right: 20px; margin-top: 10px"
Width="100px" OnClick="btnBackRejCom_Click1" />
<asp:Button ID="btnDoneRejCom" runat="server" CssClass="button" Text="Done" Style="margin-left: 20px; margin-top: 10px"
Width="100px" ValidationGroup="rejCom"
OnClick="btnDoneRejCom_Click" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
code behind :
protected void btnBackRejCom_Click1(object sender, EventArgs e)
{
pnlRejCom.Visible = false;
pnlAppRej.Visible = true;
}
Hope this helps. Happy Coding..!!!
I have same problem so I have just added CausesValidation="False" then it works fine for me.so please add CausesValidation in btnBackRejCom button like as below
Please try it
<asp:Button ID="btnBackRejCom" runat="server" CausesValidation="False" CssClass="button" Text="Back" Style="margin-right: 20px;
margin-top: 10px" Width="100px" />
I think It works for you :)
I have a Submit button on the page, which upon being clicked, shows a modal popup window. This modal popup window contains a checkbox that must be checked before the OK button of the modal can be clicked:
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function cvcbCertify_ClientValidate(sender, e) {
var elem = document.getElementById('<%= cbCertify.ClientID %>');
if (elem.checked)
e.IsValid = true;
else {
$('.pnlConfirm').show(); //not working?
e.IsValid = false;
}
}
<ajaxToolkit:ConfirmButtonExtender ID="cbeResponseReferralSignOff" runat="server"
TargetControlID="ResponseLocalSignOff" DisplayModalPopupID="popConfirm">
</ajaxToolkit:ConfirmButtonExtender>
<ajaxToolkit:ModalPopupExtender runat="server" ID="popConfirm" TargetControlID="ResponseLocalSignOff"
BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnConfirmCertify"
CancelControlID="btnCancel" PopupControlID="pnlConfirm">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:CustomValidator runat="server" ID="cvcbCertify" ClientValidationFunction="cvcbCertify_ClientValidate">Required.</asp:CustomValidator>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
</div>
</asp:Panel>
The problem is the modal window closes when validation fails. How do I prevent this window from closing or repoppen this window?
The only way to do this is by using an UpdatePanel. Additionally this will allow you to use AsyncPostBackTrigger with a Conditional UpdateMode with control events as well.
For example
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
<asp:UpdatePanel ID="upItem" runat="server">
<ContentTemplate>
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:CustomValidator runat="server" ID="cvcbCertify" ClientValidationFunction="cvcbCertify_ClientValidate">Required.</asp:CustomValidator>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Solution was to get rid of the ConfirmButtonExtender and make my own validation:
function Validate_Click() {
//using asp.net checkbox so have to go this route to get bool
var checked = $('#<%= cbCertify.ClientID %>').is(':checked');
if (checked) {
$('.lblConfirmCertifyError').hide();
return true;
}
else {
$('.lblConfirmCertifyError').show();
return false;
}
}
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px">
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:Label runat="server" ID="lblConfirmCertifyError" Text="Required." ForeColor="Red"
Style="display: none" CssClass="lblConfirmCertifyError"></asp:Label>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" CssClass="btnConfirmCertify" OnClientClick="return Validate_Click()" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
<asp:Button runat="server" ID="btnDummy" Text="" Style="display: none" />
</div>
</asp:Panel>
how can i detect if a modalpopupextender is currently being shown using javascript?
Modalpopupextender markup
<!-- Add Files Modal Form -->
<asp:HiddenField ID="AddFilesForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="AddFilesModal" BehaviorID="modalPopupExtenderAddFiles"
TargetControlID="dummyButtonAddToPendingList" PopupDragHandleControlID="PanelAddFilesOuter" PopupControlID="PanelAddFilesOuter"
OkControlID="dummyButtonAddToPendingList" BackgroundCssClass="modalBackground" DropShadow="false"
Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server" TargetControlID="PanelAddFilesInner">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelAddFilesOuter" runat="server" BackColor="Transparent" Style="display: none;">
<asp:Panel ID="PanelAddFilesInner" runat="server" BackColor="White" Style=" width:800px; height:600px; overflow:auto;">
<ContentTemplate>
<div id="AddFilesContainer" style=" padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:5px;">
<br />
Add Files
<div id="AddFiles_Div" style="height:80%;overflow:auto;">
<asp:TreeView ID="TreeViewAddItems" runat="server" Height="500px" ShowCheckBoxes="Leaf"
Width="380px" ImageSet="XPFileExplorer" NodeIndent="15" PathSeparator="\" ShowExpandCollapse="true"
EnableClientScript="true" OnTreeNodeCheckChanged="OnTreeNodeCheckChanged" OnAdaptedTreeNodeCheckChanged="OnTreeNodeCheckChanged" ShowLines="True">
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px" />
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
VerticalPadding="0px" />
</asp:TreeView>
</div>
<br />
<div class="base" style="height:20px;">
<asp:LinkButton ID="lnkAddToPendingList" runat="server" OnClick="BtnAddToPendingList_Click" BorderStyle="Solid" BackColor="#CCCCCC">Add selected items to list</asp:LinkButton>
<asp:Button CssClass="Button" ID="dummyButtonAddToPendingList" runat="server" Style="display: none;" />
<asp:Button CssClass="Button" ID="CancelAddFiles" runat="server" Text="Cancel" OnClientClick="$find('modalPopupExtenderAddFiles').hide(); return false;" />
</div>
</div>
</ContentTemplate>
</asp:Panel>
</asp:Panel>
<!-- End Add Files Modal Form -->
I don't think there is a property you can call. You probably need to hook into the shown and hiding events. Something like this:
var amIVisible = false;
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
$find('modalPopupExtenderAddFiles').add_shown(function () {
amIVisible = true;
});
$find('modalPopupExtenderAddFiles').add_hidden(function () {
amIVisible = false;
});
});
Use the BehaviourID to verify it on the client side:
<script type="text/javascript">
function IsVisible()
{
var modalPopup = $find('ModalBehaviourID');
return modalPopup ? true : false;
}
</script>
Second option:
<script type="text/javascript" >
function IsVisible()
{
return $find('ModalBehaviourID').get_PopupVisible();
}
</script>
Source: Link