Link to home
Start Free TrialLog in
Avatar of steve_a_sanders
steve_a_sandersFlag 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

ASKER CERTIFIED SOLUTION
Avatar of robasta
robasta
Flag of Zimbabwe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 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