Hi everybody, my name is Christian.
I have trouble using ModalPopupExtender, I am trying to use two ModalPopupExtenders, the first one i am using is working fine, it is for showing a confirmation button, I prepared other ModalPopupExtender it would show a progress indicator that would be shown after clicking over the Yes button that is located in the first ModalPopupExtender, I am using a Callback to execute the second ModalPopupExtender, but it doesn't work, I don't know why. following I put the complete code of this. Thank you and best regards.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script type="text/javascript">
// a reference to the popup behavior
var _popup;
//var _proceso;
function validate() {
// find the popup behavior
//this._proceso = $find('PopProceso');
//this._proceso.hide();
this._popup = $find('mdlPopup');
// show the popup
this._popup.show();
// kick-off the webservice, registering our callback
PageMethods.ValidateCreditCard($get('txtCreditCardNumber').value, this.callback);
//PageMethods.ValidateCreditCard('dfgdfgdfg', this.callback);
//alert("Entro");
}
function callback(result) {
// hide the popup
this._popup.hide();
// let the user know if their credit card was validated
if (result) {
alert('congrats, your credit card is valid!');
}
else {
alert('sorry, your credit card is not valid!');
}
}
function Verificador() {
alert("Entro");
}
</script>
<script runat="server">
<System.Web.Services.WebMethod()> _
Public Shared Function ValidateCreditCard(ByVal creditCardNumber As String) As Boolean
' simulate a longer operation ...
System.Threading.Thread.Sleep(3000)
Return True
End Function
</script>
<style>
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=60);
opacity:0.60;
}
.updateProgress
{
border-width:1px;
border-style:solid;
background-color:Gray;
position:absolute;
width:150px;
height:50px;
}
.updateProgressMessage
{
margin:3px;
font-family:Trebuchet MS;
font-size:small;
vertical-align: middle;
}
</style>
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<p style="background-color:Blue; width:95%;">
Example of using YUI-Style Simple Confirm Dialog<br />
</p>
<br />
<asp:Button ID="btnTrigger" runat="server" Text="Show Popup" />
<cc1:ModalPopupExtender
runat="server" BehaviorID="popup" TargetControlID="btnTrigger"
PopupControlID="pnlPopup" BackgroundCssClass="modalBackground"
OkControlID="btnOk" ID="PopProceso" />
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalpopup" style="display:none">
<div>
<div>
<asp:Label ID="Label1" runat="server" CssClass="msg" Text="Are you sure?" />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('popup').hide(); return false;" />
</div>
<div>
<asp:Label ID="Label2" runat="server" CssClass="msg" Text="Do you want to continue?" />
</div>
<div>
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="40px" OnClientClick="validate();" />
<asp:Button ID="btnCancel" runat="server" Text="No" Width="40px" OnClientClick="$find('popup').hide(); return false;" />
</div>
</div>
</asp:Panel>
<cc1:ModalPopupExtender
ID="mdlPopup" runat="server" TargetControlID="btnOk"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" />
<asp:Panel ID="Panel1" runat="server" CssClass="updateProgress" style="display:none">
<div align="center" style="margin-top:13px;">
<img src="progress.gif" />
<span>Validating ...</span>
</div>
</asp:Panel>
<input id="txtCreditCardNumber" type="text" /></div>
</form>
</body>
</html>