It has taken me a while to get the AJAX ModalPopupExtender working the way that I see other applications using it, but now I have a new problem. I am trying to reuse code for multiple instances of a type of data by instantiating multiple extenders, but using the same panel and code to implement the dialog. Everything works fine for one extender on the page, but when I add a second extender the first one starts to act strangely (intermittently not displaying the dialog, displaying a non-modal dialog, or doing nothing at all). Would appreciate any help on this!
<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!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">
<head>
<title>Test ModalPopupExtender</title>
<link href="~/Style/Helpdesk.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var callingCtrl;
function initDialog(calledBy) {
callingCtrl = $get(calledBy);
if (callingCtrl.value > "") {
$get("txtChangeText").value = callingCtrl.value;
}
}
function okayWasClicked() {
callingCtrl.value = $get("txtChangeText").value;
callingCtrl = "";
return true;
}
function cancelWasClicked() {
callingCtrl = "";
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/AJAX/Scripts/Start.debug.js" />
<asp:ScriptReference Path="~/AJAX/Scripts/extended/ExtendedControls.debug.js" />
</Scripts>
</ajax:ToolkitScriptManager>
<asp:Panel ID="pnlPopup" runat="server" Style="display:none; background-color:Aqua; border-width:3px; border-style:solid; border-color:Gray; width: 200px;">
Change value to:
<asp:TextBox ID="txtChangeText" runat="server" Width="60%" ></asp:TextBox>
<br />
<asp:Button ID="btnOKdialog" runat="server" Text="OK" />
<asp:Button ID="btnCancelDialog" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Label ID="lblText1" runat="server" Text="User Value 1:" />
<asp:TextBox ID="txtUserValue1" runat="server" />
<asp:Button ID="btnChange1" runat="server" Text="Show" OnClientClick="return initDialog('txtUserValue1');" />
<ajax:ModalPopupExtender ID="mpeButton1" runat="server"
BackgroundCssClass="cssModalBackground" Enabled="True" DropShadow="true"
TargetControlID="btnChange1" PopupControlID="pnlPopup"
OkControlID="btnOKdialog" OnOkScript="return okayWasClicked();"
CancelControlID="btnCancelDialog" OnCancelScript="return cancelWasClicked();"
/>
<br />
<asp:Label ID="lblText2" runat="server" Text="User Value 2:" />
<asp:TextBox ID="txtUserValue2" runat="server" />
<asp:Button ID="btnChange2" runat="server" Text="Show" OnClientClick="return initDialog('txtUserValue2');" />
<ajax:ModalPopupExtender ID="mpeButton2" runat="server"
BackgroundCssClass="cssModalBackground" Enabled="True" DropShadow="true"
TargetControlID="btnChange2" PopupControlID="pnlPopup"
OkControlID="btnOKdialog" OnOkScript="return okayWasClicked();"
CancelControlID="btnCancelDialog" OnCancelScript="return cancelWasClicked();"
/>
</div>
</form>
</body>
</html>
Select all Open in new window
In case anyone is interested, the attached code is what I changed it to in order to get the result I needed.
Much appreicated!
Open in new window