We help IT Professionals succeed at work.
Get Started

Multiple ModalPopupExtender instances

steve_a_sanders
on
703 Views
Last Modified: 2012-05-09
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

Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE