Avatar of steve_a_sanders
steve_a_sanders
Flag for United States of America asked on

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

AJAXASP.NETJavaScript

Avatar of undefined
Last Comment
steve_a_sanders

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
robasta

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
steve_a_sanders

ASKER
robasta - your reference to matt berseth's blog was exactly what I needed!
In case anyone is interested, the attached code is what I changed it to in order to get the result I needed.
Much appreicated!
<%@ 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" />
            &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" 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>

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy