Question

I have a javascript function

generateGraph() {
    ...
    jQuery.get('chart.php?month='+month+'&year='+year);
    document.getElementById('graph').src = 'charts/'+month+'_'+year+'.png';
    ...
}

which is called onChange. It basically creates, if not exists, or refreshes if already exists, a PNG image (using the first line above) and supposedly displays the generated image (using the second line above).

The first line works, but the second one doesn’t. Meaning, the image is generated, but the second line can’t display the image, unless the page is reloaded, or if the image being referred to already existed before the page was loaded (meaning the 1st line just “refreshed” the image)

Any ideas as to why this is and how to fix it?

Thanks much for your help in advance!

Answer 1

Try this:

generateGraph() {
    ...
    jQuery.get('chart.php?month='+month+'&year='+year, function() {
        document.getElementById('graph').src = 'charts/'+month+'_'+year+'.png';
        // as mentioned by others this also works and is in the jquery style:
        // $("#graph").attr("src", "charts/" + month + "_" + year + ".png");
    });
    ...
}

If I understand everything correctly, a call to chart.php generates an image at charts/month_year.png. If this is correct, your original code sent a request for the image immediately after sending a request to generate that image. This doesn’t give enough time to the server to create and post the image to charts/month_year.png, which is why nothing appeared.