asked on

ASP.NET - How trigger AJAX ModalPopupExtender from SVG circle OnClick event?

ASP.NET / VB.NET 2017 Webforms / AjaxControlToolkit

I have a page with SVG circles on it. When user clicks on a circle I want an AJAX ModalPopupExtender to open so I can display data in it etc.

After the code is the error I am getting.

For simplicity, I am only showing one circle in the code.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="OP.aspx.vb" Inherits="OP.OrderProg" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    
      <style type="text/css">

        /* Set background color of web page */ 
        body {background-color: #F7F7F7;}

         /* >>> (AJAX)   ModalPopupExtender <<< */
        .modalBackground
            {
                background-color: Black;
                filter: alpha(opacity=90);
                opacity: 0.5;
            }

        /* Confirm */
        .modalPopupConfirm
            {
                background-color: #FFFFFF;
                width: 300px;
                height: 173px;
            }

        .modalPopupConfirm .header
            {
                background-color: #3DCD58;
                height: 44px;
                color: White;
                line-height: 44px;
                text-align: left;
                font-family: Arial, Helvetica, sans-serif;
	            font-size: 22px;
                padding-left: 12px;
            }

        .modalPopupConfirm .body
            {
                min-height: 50px;
                line-height: 30px;
                text-align: center;
                font-family: Arial, Helvetica, sans-serif;
	            font-size: 14px;
                padding-top: 24px;
            }

        .modalPopupConfirm .footer
            {
                padding: 3px;
                padding-right: 12px;
            }

        .modalPopupConfirm .yes, .modalPopup .no
            {
                height: 24px;
                line-height: 24px;
                text-align: center;
                cursor: pointer;
            }

        .modalPopupConfirm .yes
            {
                background-color: #EDEDED;
                border: 1px solid #0DA9D0;
            }

        .modalPopupConfirm .no
            {
                background-color: #EDEDED;
                border: 1px solid #5C5C5C;
            }


      </style>

      <title>OP</title>

</head>

<body>
    
    <form id="frmMfgProg" runat="server">

        <%-- (AJAX) Needed for ConfirmButtonExtender and ModalPopupExtender --%>
        <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>  

        <div>

                <svg viewBox="0 ,0, 100, 100" preserveAspectRatio="xMidYMin slice" width="9%" style="padding-bottom: 92%; height: 1px; overflow: visible">

                    <circle id = "circle1" cx = "50" cy = "50" r = "36" onClick="mpeConfirm"/>

                    <text x="30" y="105" fill="black" font-size = "16" font-family = "sans-serif">Order</text>

                    <text x="1" y="125" fill="black" font-size = "16" font-family = "sans-serif">Acknowledged</text>

                    <line id = "line1" x1 = "86" y1 = "50" x2 = "140" y2 = "50" />

                 </svg>

        </div>

        <asp:HiddenField ID="HidForMpeConfirm" runat="server" />

        <%-- Confirmation Modal Popup --%>
        <ajaxToolkit:ModalPopupExtender 
                ID="mpeConfirm" 
                runat="server"            
                TargetControlID="HidForMpeConfirm"
                PopupControlID="panConfirmPopup"
                BackgroundCssClass="modalBackground"
                DropShadow="True">
        </ajaxToolkit:ModalPopupExtender>

        <asp:Panel ID="panConfirmPopup" runat="server" CssClass="modalPopupConfirm" style="display:none; background-color: #F7F7F7"> 

            <div class="header">
                <asp:Label ID="lblConfirmTitle" runat="server" Text="Correct Order?"></asp:Label>
            </div>
            <div class="body">
                <asp:Label ID="lblConfirmQuestion" runat="server" Text="Is this the order to confirm? " ForeColor="#333333"></asp:Label>
            </div>
            <hr style="border-top: 1px solid #EDEDED; background: transparent; width:290px"/>
            <div class="footer" align="right">
                <asp:Button ID="btnConfirmYes" runat="server" Text="Yes" OnClick = "ConfirmYes_Click" Width="100px" Height="24px" BackColor="#EDEDED" ForeColor="#333333"/>
                <asp:Button ID="btnConfirmNo" runat="server" Text="No" OnClick = "ConfirmNo_Click" Width="100px" Height="24px" BackColor="#EDEDED" ForeColor="#333333"/>
            </div>

        </asp:Panel>


    </form>

</body>

</html>

Open in new window

When I run the code and click on the circle I get "JavaScript runtime error: 'mpeConfirm' is undefined".

I also tried setting the TargetControlID="circle1" and that gives error "The TargetControlID of 'mpeConfirm' is not valid. A control with ID 'circle1' could not be found."

What is the simplest way to trigger this ModalPopExtender when the SVG circle is clicked?

Thanks,

ASKER CERTIFIED SOLUTION

Ryan Chong

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sqdperu

ASKER

Works great! Thanks for your help.