Image inside UpdatePanel not working in Firefox

Question

I have an image that is generated automatically inside an Ajax UpdatePanel. This image is a graph that is generated from server-side code. Searching in Google, I realised it was a bug of FF. Does anybody have any solution?

Here is the source (it contains also unneeded tags, I just copied-paste)

<div>
   <asp:UpdatePanel ID="UpdatePanelGraph" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
           <asp:Panel ID="pnlGraph" runat="server" CssClass="container">
                <div id="chart">
                     <Web:ChartControl ID="chartExchange" runat="server" Width="300px" Height="200px" BorderStyle="None" GridLines="both" DefaultImageUrl="../images/noData.png" ShowTitlesOnBackground="False" BorderWidth="1px" Padding="1" HasChartLegend="False" BottomChartPadding="20" TopChartPadding="5" RightChartPadding="5" LeftChartPadding="20">
                            <Border Color="211, 224, 242"></Border>
                            <YAxisFont ForeColor="115, 138, 156" Font="Tahoma, 7pt" StringFormat="Far,Center,Character,LineLimit"></YAxisFont>
                            <XTitle ForeColor="115, 138, 156" StringFormat="Center,Near,Character,LineLimit">
                            </XTitle>
                            <XAxisFont ForeColor="115, 138, 156" StringFormat="Near,Near,Character,NoClip"></XAxisFont>
                            <Background Type="LinearGradient" Color="#C9DEFD" ForeColor="Transparent" EndPoint="500, 500">
                            </Background>
                            <ChartTitle ForeColor="51, 51, 51" Font="Verdana, 9pt, style=Bold" StringFormat="Near,Near,Character,LineLimit">
                            </ChartTitle>
                            <Charts>
                                <Web:SmoothLineChart Name="buy" Legend="Blen">
                                    <Line Color="ActiveCaption"></Line>
                                    <DataLabels>
                                        <Border Color="Transparent"></Border>
                                        <Background Color="Transparent"></Background>
                                    </DataLabels>
                                </Web:SmoothLineChart>
                                <Web:ColumnChart Name="avgChart">
                                </Web:ColumnChart>
                            </Charts>
                            <YTitle ForeColor="115, 138, 156" StringFormat="Center,Near,Word,LineLimit"></YTitle>
                    </Web:ChartControl>
                </div>                
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

Answer 1

EDIT:

Can you control how the graphic name/file name gets created and rendered to the browser? Could the image be cached by the browser? I had issues with a graphing packing in Java/JSP with AJAX calls. I had to append a GUID to my AJAX url query string variable to fix the caching issue.

Answer 2

What version of .NET are you using? The 3.5 framework has a new graphing control. I spent a few days playing around with it, and was surprised at how powerful it is. And I also used it in UpdatePanels without any problems whatsoever.

Answer 3

It looks to me that you should have the same problem on FF or IE, regardless.

I've noticed on your updatepanel that you have

UpdateMode="Conditional"

but you don't specify any triggers. what that means is the content of the update panel will not get triggered by anything else other than any buttons inside the update panel which I don't see. Try changing the UpdateMode to Always for debugging and see if that fixes your problem, and work out the appropriate trigger from there.

Answer 4

Also it is not a good solution, setting the cacheability to nocache resolved my problem. I worte this on my pageload

  Response.Cache.SetCacheability(HttpCacheability.NoCache);

It also works by setting this code

<script type="text/javascript">

      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_pageLoaded(pageLoaded);
      var c = 0;
      function pageLoaded(sender, args)
      {
      var img = document.getElementById("ctl00_ctl00_MainContent_MainContent_chartExchange");
      c++;
      img.src = img.src + "?" + c;
      }

</script>

Answer 5

Some digging with FireBug led me to discover that exactly the same image URL is being returned whether I select 120 Ditë or 30 Ditë or mesataret. Looks like your charting control is returning the same image URL, even when the data behind it changes. Sounds to me like a bug in the control.

You may be able to use a web.config in the WebCharts directory to set the cacheability of images served from there, to cause them never to be cached.