troubleshooting Question
ASP.NET - How trigger AJAX ModalPopupExtender from SVG circle OnClick event?
sqdperu
asked on
asked on
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.
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,
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>
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,
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.