1

I am making a web dashboard and for this I have a javascript function that loops infinitely, updating a particular div at frequent intervals. (it uses ajax/jquery to do this).

I have used a loop with setTimeout:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">

      function updateMain() {
        setTimeout(function() {
          console.log("updating");
          $('#main').load('new-content.php #main', function() {});
          updateMain();
        }, 3000)
      }

      updateMain();
    </script>
  </head>

  <body>
    <div id="main">
        <p>hi there</p>
    </div>
  </body>
  
</html>

'new-content.php' is a file that is constantly updated by another part of my program, to show the new content for the dashboard. it looks something like this:

<div id="main">
    <p>Hello i am updated content</p>
</div>

I am sure the loop is working as the "updating" messages appear at regular intervals in the console.

When the program starts, the div is showing "hello there", and in the new-content.php file it has "hello am updated content".

The first time the loop runs, it updates the div to show "hello i am updated content".

But if I further update the new-content.php file, for example to say "hello I am further updated content", it just won't show on my webpage. However I am sure that the loop is still running as the messages appear in console.

It's like ajax has some cached version of the new-content.php file that it loads at the start then keeps using forever.

I am very confused, if you could help me I would be very grateful

Thank you

PS: if it is of relevance, the website is running through flask but I don't think this is the problem.

EDIT: I believe it is actually a flask caching issue

mekong_screekong
  • 25
  • 7

2 Answers2

2

You can try adding a cache buster to see if that helps. Change your code as follows:

function updateMain() {
        setTimeout(function() {
          console.log("updating");
          const cb = new Date().getTime();
          $('#main').load('new-content.php?cb=' + cb + '#main',function() {
           updateMain();
          });
          
        }, 3000)
      }
  updateMain();
Mifo
  • 563
  • 6
  • 6
  • Thank you, I have tried this, but I'm still getting the same problem. Is there some way I can force a cache refresh? – mekong_screekong Apr 19 '22 at 09:57
  • Without seeing your PHO code this is hard to guide you. However, if you look at the network request in your browser dev tools do you see the data you expect in the response from new-content.php? Also, I am curious what the #main is doing in the request. – Mifo Apr 19 '22 at 12:16
  • What do you mean by my PHP code? I've sent all the code there is in the project, apart from the python file: https://www.toptal.com/developers/hastebin/vipepamocu.rb – mekong_screekong Apr 19 '22 at 13:01
  • I checked the network inspector and the file is showing old content, despite me having updated the file so the js should be sending the newer version of the file, but its not – mekong_screekong Apr 19 '22 at 13:05
  • You are retrieving new content from new-content.php correct? Can you show the code for new-content.php? That is what is generating the updated content that you are expecting to load into #main, correct? – Mifo Apr 19 '22 at 13:57
  • new-content.php is just html. I think it's probably misnamed; in a tutorial I was reading they named theirs .php so I just did the same thing. It's not a php file.

    further updated content

     – mekong_screekong Apr 19 '22 at 13:59
  • I made a slight change in my original answer (placed recursive call inside of the load callback). See if that makes a difference. – Mifo Apr 19 '22 at 15:00
  • Thank you very much for your help but that's still not working. I've done some research and I think I might have more luck with my project if I switch to using socketIO to send data to the webpage to display, instead of trying to have the javascript loading the content from a shared html file. I'll add this as an answer to this post – mekong_screekong Apr 19 '22 at 17:34
0

Wasn't able to solve the issue but for anyone who is trying to make a similar project, I decided to use flask-socketio instead which allows me to send data to javascript to be shown on the page, instead of javascript loading the data itself from a file. (the answer by vladtn on this SO post was useful as an introduction to socketio)

mekong_screekong
  • 25
  • 7