CODEWITHSUNDEEP
javascriptflask
Shreya Pandita
Shreya Pandita

Reputation: 144

Update images in a webpage without having to refresh the entire page

I am a JavaScript beginner. I am using flask to integrate my python code with the frontend (plainJS,HTML and CSS).

Basically, I have a web page containing an image(or rather a tiles of an image) on the left hand side, and search results on the right. When the user selects a particular tile in the image, it gets sent to the backend for processing which saves the results(similar looking tiles) into a folder. These are to be retrieved automatically on the right side of the web page.

The problem with this is: The page gets loaded first when I run the flask app and since the results folder in the beginning contains images from the previous session, they are loaded. Also, after the python processing is done I have to manually refresh the page in order to load the results.

I have tried: Writing a setInterval function to update the source of the image after an interval of every 5 secs, so that when new results arrive they can be automatically displayed. The code is written below. Apparently this function is not working at all (I put in console.log() statements but they don't display anything):

JAVASCRIPT--------->
setInterval(function(){
    var images=document.getElementsByTagName('img');
    for(var i=0;i<images.length;i++){
      var dt=new Date();
      console.log(dt); //does not display anything on the console
      var img=images[i];
      if(img.id!='MainIMAGE')    // reload all images except image with id MainIMAGE
        {
           img.src=img.src+"?"+dt.getTime();
           console.log(img.src);  // does not display anything as well
        }
   }
},5000);

Is this the right solution? Or is there any other approach to this as well?

Upvotes: 0

Views: 2033

Answers (2)

mplungjan
mplungjan

Reputation: 177950

I suggested using the searchParams, not search

const images = [...document.querySelectorAll('img:not(#MainIMAGE)')]; // assuming no dynamic images inserted
setInterval(() => {
  images.forEach(img => {
    const url = new URL(img.src);
    url.searchParams.set('time', new Date().getTime());
    img.src = url.href;
  })
}, 2000);
<img src="https://placeimg.com/100/100/any" /><br/>

<img id="MainIMAGE" src="https://placeimg.com/200/200/any" />

Upvotes: 1

shrys
shrys

Reputation: 5940

You can use URL to avoid concatenating previous time param:

setInterval(function() {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    var dt = new Date();
    console.log(dt); //does not display anything on the console
    var img = images[i];
    if (img.id != 'MainIMAGE') // reload all images except image with id MainIMAGE
    {
      const url = new URL(img.src);
      url.search = 'time=' + dt.getTime();
      img.src = url.href;
      console.log(img.src + ' ' + dt); // does not display anything as well
    }
  }
}, 1000);
<img src="https://placeimg.com/200/200/any" />

Upvotes: 1

Related Questions