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

Multiple ModalPopupExtender instances

Premium Content

Premium Content

Why Experts Exchange?

Ask ANY Question

Did You Know?