onload（）とリフレッシュボタンを使ってWebページを更新する

Question

私は基本的にいくつかの分析に基づいていくつかのグラフを表示するdjangoのWebページを持っています。この分析は、ユーザがウェブページ上のリフレッシュボタンを押してグラフをリフレッシュすることができる10分間以上の時間にわたって起こり得る。したがって、バックエンドでは、ディレクトリ内のグラフ（イメージ）は新しいグラフで上書きされます（パスとイメージ名は同じままです）。しかし、これはブラウザのリフレッシュボタンを押したときに反映されますが、両方の場所で使用されるコードが互いにレプリカであっても、私が自分のウェブページ上にあるリフレッシュボタンをクリックしても反映されません。

私のonloadという機能IDは、getGraphs()と呼ばれます。ページは、この関数が呼び出され、ブラウザの更新ボタンをクリックすることにより、再ロードされると、次のようにコードがあるたびに、

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

は、私は、Webページ上の持って更新ボタンのリフレッシュボタンコードの2つのバージョンがあります。

バージョン1（これは基本的にオンロード関数を呼び出し、グラフが更新される）：

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

バージョン2（Iはオンロード機能を持っているが、グラフは更新されない正確なコード）：

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コード（編集）：バージョン1について

：

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

バージョン2の場合

：

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

私は私が間違っているのと同じに関するガイダンスを必要とするものに非常に混乱しています。

ありがとうございます。

Answer 1

問題が最も可能性があり、この：

だから、バックエンドでのディレクトリのグラフ（画像）は、新たなグラフと （パスとイメージ名が同じまま）上書きされます。

DOMを動的に更新すると、同じ画像を2回ダウンロードしないようブラウザがスマートになることがあります。

あなたができることは、URLにランダムなクエリ文字列を追加して画像を「無効にする」ことです。

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