Dynamically generated image is not displayed when <img> src is updated to point to it

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 by value. It basically creates, if it does not exist, or updates, if it already exists, a PNG image (using the first line above) and presumably displays the generated image (using the second line above).

The first line works, and the second does not. Meaning, an image is generated, but the second line cannot display the image, unless the page is reloaded, or if the image that was already specified already existed before the page was loaded (this means that the first line simply “updated” the image)

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

Thanks so much for your help in advance!

Answer 1

:

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");
    });
    ...
}

, chart.php charts/month_year.png. , . charts/month_year.png, .

Answer 2

src $.get, , :

generateGraph() {
    ...
    jQuery.get('chart.php?month='+month+'&year='+year, function() {
        jQuery('#graph').attr("src",'charts/'+month+'_'+year+'.png');
    });

    ...
}

Answer 3

, , src jQuery , , , . AJAX .

Answer 4

, , . . , , :

var newImage = new Image();
newImage.onload = function(){
    // Update existing image src on your page
    }
}
newImage.src = "URL to your image";