Question

$('#ReportTest').attr("src", "../../Chart/HistoricalChart?ReportID=" + settings.id);

This does what I want in an extremely easy manner.

$('#LoadingPanel').show();

$.ajax({
    url: "../../Chart/HistoricalChart",
    data: "reportID=" + settings.id,
    success: function (result) {
        $('#LoadingPanel').hide();
        $('#ReportTest').attr("src", result);
    }
});

This code is broken in that result does not contain the path to an image so nothing loads, but I am able to show/hide a loading panel while waiting for the data to be fetched from the server.

Is there a way to combine both of these in an easy manner? I’m currently returning a file, but I’m not opposed to returning a path to the image to load into #ReportTest — but I just was wondering if there was a simpler way.

Answer 1

$('#LoadingPanel').show();
$('#ReportTest').bind('load', function () {
    $('#LoadingPanel').hide();
    $(this).unbind('load');
}).attr('src', '../../Chart/HistoricalChart?ReportID=' + settings.id);

and if you wanted to hide the spinner in case of an error (for example the server returns 404 or 500):

$('#LoadingPanel').show();
$('#ReportTest').bind('load', function () {
    $('#LoadingPanel').hide();
    $(this).unbind('load');
}).bind('error', function () {
    $('#LoadingPanel').hide();
    $(this).unbind('error');
}).attr('src', '../../Chart/HistoricalChart?ReportID=' + settings.id);