CODEWITHSUNDEEP
asp.net
Chad
Chad

Reputation: 2445

ASP.net: Triggering immediate client side scripts during an image rendering

I have a web application that creates a graph on another aspx page. Sometimes the graph cannot be created to specification because there is an error in the user specification (such as a string where an integer was expected).

I would like to immediately pop up an alert window telling them that something went wrong when I was trying to render the graph.

The thing is, I don't know how to immediately check to see if I should insert a script for an alert window. Once my code on "chart.aspx"(image URL) is executed, I don't know how to immediately check if anything went wrong from the main page. I know it happened in the code in chart.aspx, but other than not to not render the image or render a different image, I don't know how to tell the user before another postback. I would really like to see if there is any sort or event or stage in the page lifecycle after one of the images is rendered.

If this is not possible, how can I chart.aspx convey an error message to default.aspx if it is simply an image. Maybe some sort of Response.Write(...?)

Thanks again guys.

Upvotes: 0

Views: 295

Answers (1)

Chris
Chris

Reputation: 28064

Maybe you could try monitoring the image's load events and handle onabort and onerror via javascript?

http://www.w3schools.com/jsref/dom_obj_image.asp

Image Object Events

Event      The event occurs when...  
onabort    Loading of an image is interrupted
onerror    An error occurs when loading an image
onload     An image is finished loading

The old school way of doing this would be to render your image tag like below:

<img src="chart.aspx" onerror="alert('Image failed to load because XYZ.');" />

Nowadays, I'd recommend you use jquery, something like this:

<img src="placeholder.gif" class="chart" alt="chart">

<script type="text/javascript">
    jQuery(function($) {
        var img = $(document.createElement('img'));
        img.on('error', function() { alert ('...'); });
        img.on('load', function() { $('img.chart').attr('src', img[0].src); });
    });

Upvotes: 1

Related Questions