Solved: 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,