Updating a web page via onload () and using the refresh button

Question

I have a django webpage that basically displays multiple graphs based on some analysis. This analysis can occur over a period of more than 10 minutes, during which the user can click the refresh button on the web page to refresh the graphs. Thus, in the backend, the graphics (images) in the catalog are overwritten with new graphs (the paths and names of the images remain unchanged). But this is reflected when I click the browser refresh button, but not when I click the refresh button that I have on my web page, although the code used in both places is replicas of each other.

My onloadfunction id called getGraphs(). Each time the page is reloaded by clicking the browser refresh button, this function is called and the code looks like this:

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 the refresh button code for the refresh button that I have on the web page.

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

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

Version 2 (the exact code that 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 version 1:

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

For version 2:

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

I am very confused by what I am doing wrong, and I had to be guided by the same.

Thanks in advance.

Answer 1

Most likely the problem is:

, () ( ).

, DOM.

, "" , url.

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