I have a page which has a chart control inside an update-panel. When I click on any bar in the chart, it runs some javascript. The javascript affects controls that are OUTSIDE of the update-panel.
This actually works fine.
However, if I put a button inside the updatepanel, and I click on it, and it does a postback, then the updatepanel refreshes correctly, but the javascript does not work any more.
So to simplify things in tracking down the cause, I got rid of the chart, and just put an image in the update panel.
I associated a imagemap with the image.
When you click on the image, it fires some javascript. This works fine. UNTIL ....
you click on the button. Then the image can no longer fire the javascript.
This is the javascript:
<script type="text/javascript">$(document).ready(function () {$('area').click(function () {
var thetitle = $(this).attr('title');
alert(thetitle);
});
})</script>As you can see, it shows an alert when the image is clicked:
Here is the Html:
<img src="/images/audience.jpg" usemap="#theImageMap" /><map name="theImageMap" id="theImageMap"><area shape="rect" coords="0,0,106,84" title="left side" alt="left side" /><area shape="rect" coords="107,0,212,84" title="right side" alt="right side" /></map>
You can try it yourself, you will see that if the image is clicked on, the title of the area being clicked on will appear. Until, you do a postback. That breaks it.
Is there any solution to this? I need an updatepanel, because there is also a video on my page outside the updatepanel, and I want to prevent the video from being refreshed whenever the updatepanel contents do a refresh. Otherwise, the video will keep starting from the beginning again.
Note that the button that is clicked does nothing at all in its event. It just posts back.
Here is the entire page, if you want to try it out:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testchart.aspx.vb" Inherits="testchart" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /><script type="text/javascript">$(document).ready(function () {$('area').click(function () {
var thetitle = $(this).attr('title');
alert(thetitle);
});
})</script></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><div><asp:UpdatePanel ID="upanel" runat="server"><ContentTemplate><img src="/images/audience.jpg" usemap="#theImageMap" /><map name="theImageMap" id="theImageMap"><area shape="rect" coords="0,0,106,84" title="left side" alt="left side" /><area shape="rect" coords="107,0,212,84" title="right side" alt="right side" /></map><asp:Button ID="Buttonzoom" runat="server" Text="zoom" /></p></ContentTemplate></asp:UpdatePanel></div></form></body></html>Thanks.