Solved: Multiple ModalPopupExtender instances

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" />
            &nbsp;&nbsp;&nbsp;
            <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>

Open in new window

<%@ 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 _source; var _popup; var _newText; function initDialog(calledBy) { this._source = calledBy; if (this._popup == null) { this._popup = $find('mpeChangeText'); this._newText = $get('txtChangeText'); } if (this._source.value !== undefined) { this._newText.value = this._source.value; } this._popup.show(); } function okayWasClicked() { this._source.value = this._newText.value; cleanup(); } function cancelWasClicked() { cleanup(); } function cleanup() { this._source = null; this._newText.value = ""; this._popup.hide(); } </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; padding:3px; 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" Text="Original 1" /> <asp:Button ID="btnChange1" runat="server" Text="Show" OnClientClick="initDialog($get('txtUserValue1')); return false;" /> <br /> <asp:Label ID="lblText2" runat="server" Text="User Value 2:" /> <asp:TextBox ID="txtUserValue2" runat="server" Text="Original 2" /> <asp:Button ID="btnChange2" runat="server" Text="Show" OnClientClick="initDialog($get('txtUserValue2')); return false;" /> <ajax:ModalPopupExtender ID="mpeChangeText" runat="server" BackgroundCssClass="cssModalBackground" Enabled="True" DropShadow="true" TargetControlID="pnlPopup" PopupControlID="pnlPopup" OkControlID="btnOKdialog" OnOkScript="okayWasClicked();" CancelControlID="btnCancelDialog" OnCancelScript="cancelWasClicked();" /> </div> </form> </body> </html>