nidHi nidHi - 8 days ago 6
Ajax Question

Refreshing a webpage through onload() and through a refresh button

I have a django web page that basically displays a few graphs based on some analysis. This analysis can happen for a time duration for over 10 mins, during which the user can press a refresh button on the webpage to refresh the graphs. So in the backend the graphs(images) in the directory are overwritten with new graphs(the paths and image names remain the same). But this is reflected when I press on the browser refresh button but not when I click on the refresh button that I have on my webpage even though the code used in both places are replicas of each other.

My

onload
function id called
getGraphs()
. Every time the page is reloaded by clicking the browser refresh button this function is called and the code is as follows,

function getGraphs(ip)
{
$.ajax({
url: '/getGraphs/',
type: 'GET',
data: {"ip":ip},
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (result) {

$('#res').empty(); //div I am updating

resDiv = document.getElementById("res");
var data = result.data["directory"];
for (var i = 0; i < data.length; i++)
{
resDiv.innerHTML+=('<h2>'+data[i]["name"]+'</h2>');
var images = data[i]["images"];

for (var j = 0; j < images.length; j++) {
console.log("i:"+i+" dataLen:"+images.length)
var path="results/"+result.uniqueID+"/"+data[i]["name"]+"/"+images[j]["name"]; //the path of the image
resDiv.innerHTML+=("{% load static %}<img class='hoverImages' onclick=\"zoomIn('"+path+"')\" style='width:600px;height:300px;' src=\"{%static '"+path+"'%}\"/>&nbsp&nbsp&nbsp&nbsp");
}
}

},
error: function (){
alert("error from getting dir");
}
});
}


I have two versions of refresh button code for the refresh button I have on the webpage.

Version1 (this basically calls the onload function and the graphs are updated):

function refresh()
{
location.reload();
}


Version2(the exact code I have in the onload function but the graphs are not updated):

function refresh(ip)
{
$.ajax({
url: '/getGraphs/',
type: 'GET',
data: {'ip':ip},
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (result) {

$('#res').empty();

resDiv = document.getElementById("res");
var data = result.data["directory"];
for (var i = 0; i < data.length; i++)
{
resDiv.innerHTML+=('<h2>'+data[i]["name"]+'</h2>');
var images = data[i]["images"];

for (var j = 0; j < images.length; j++) {

var path="results/"+result.uniqueID+"/"+data[i]["name"]+"/"+images[j]["name"];
resDiv.innerHTML+=("{% load static %}<img class='hoverImages' onclick=\"zoomIn('"+path+"')\" style='width:600px;height:300px;' src=\"{%static '"+path+"'%}\"/>&nbsp&nbsp&nbsp&nbsp");
}
}

},
error: function (){
alert("Error refresh!")
}

});
}


HTML code(edited):

For Version1:

<button id="refresh" onclick="refresh()" style="position:relative;display: inline-block;width:11vh;" class="btn btn-primary">REFRESH</button>


For Version2:

<button id="refresh" onclick="refresh('{{ip}}')" style="position:relative;display: inline-block;width:11vh;" class="btn btn-primary">REFRESH</button>


I am very confused on what I am doing wrong and would need guidance on the same.

Thanks in advance.

Answer

The problem is most likely this:

So in the backend the graphs(images) in the directory are overwritten with new graphs(the paths and image names remain the same).

The browser might be smart enough to not download the same image twice when you update the DOM dynamically.

What you can do is try to "invalidate" the image by appending a random query string to the url.

var path = "results/.../..."
path += "?" + Math.random()
Comments