Javascript want to have a label that you can check for auto-refreshing the page

Question

I have tried to make a label, that when you 'check' it, it will auto-refresh the page every 5 seconds. I found a few threads but didn't get it to work! this is how I have done it so far:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label>
      <input
        type="checkbox"
        name="refresh"
        autocomplete="off"
        value="autorefreshoff"
        id="refresh-btn"
        onclick="refresh()"
      />
    </label>
  </body>
  <script>
    //Don't know what do do here, tried this:
    function refresh() {
      window.location.reload(1);
    }
  </script>
</html>

I am guessing that I have to make a loop in my javascript code with a delay on? So whenever this label is "checked" its gonna loop through the javascript code every 5 seconds, and if I would turn off the label its gonna stop looping.

Don't know javascript that well unfortunately.

In like 99% of the time, you don't want the whole page to autorefresh, but rather fetch new data and manipulate the existing DOM. Nowadays this is often done with websockets which pushes new data to your webapp, or you can manually request data via `fetch` — baao, May 23 '20 at 14:10
@baao well yes, that actually sounds better. Had no idea such a thing existed! I do get prices from products from an API (on the real project), and I would love to have those prices being updated every 5 seconds. I did have it so you couldn't choose if you want it to auto-refresh, but found out that was stupid as my "search-box" for the table just refreshes. But there is a way to only refresh the prices you say? — , May 23 '20 at 14:13
@KennyMeyer ah alright! One question tho, is there a way to ask the user for how many seconds there shall be in between each refresh? So the user can choose if its gonna be 1 second, or 27 seconds etc? I am currently thinking about using the "select" "option" in HTML, might be a bit to much hard coding tho? Do you have a solution? — , May 23 '20 at 14:26

score -1 · Answer 1 · answered May 23 '20 at 14:31

-1

Here's a basic example of how to load data every second using fetch, then updating the DOM. You need to adapt this to your needs.

setInterval(fetchNewData, 1000);
fetchNewData();
function fetchNewData() {
fetch('https://jsonplaceholder.typicode.com/todos/' + Math.floor(Math.random() * 10) + 1)
  .then(r => r.json())
  .then(r => document.getElementById('foo').innerHTML = `User title: ${r.title}`);

}

<div id="foo">
  
</div>

answered May 23 '20 at 14:31

baao

71,625
17
143
203

okay, will this work even though I am using Python Flask? I am getting values from an API, and returning the values from python to HTML (Jinja), what link do I have to use instead of "https://jsonplaceholder.typicode.com/todos/", my API link? – May 23 '20 at 14:36
Yes, exactly like this and your API link. Then just select the DOM elements where to place new data @SimonSjöö – baao May 23 '20 at 14:44
tried that but gave no luck, its a very big API and have over 190+ products with price, amount, orders and way more stuff. Couldn't get it to work as I am grabbing values from the API on python, then returning them to my HTML (jinja) – May 23 '20 at 14:59
@SimonSjöö you will want to return the values as json from flask, not a rendered html page; then it works. The simplest would be to create an additional endpoint in flask that returns the values your are else passing to your view renderer – baao May 23 '20 at 17:39

score -2 · Accepted Answer · answered May 23 '20 at 14:12

-2

I think this is what you are looking for: Javascript Auto Refresh Toggle Checkbox

Pls approve this answer if it was helpful!

answered May 23 '20 at 14:12

Hakfo

61
1
4

well I think this is what I am looking for, not sure why I didn't find it. But got a bit interested in what Baao was commenting, so will check that out first, then take a look on that thread if it didn't work out! thanks :) – May 23 '20 at 14:15

Javascript want to have a label that you can check for auto-refreshing the page

2 Answers2