How can i get refreshed value of flask variable with JS and show in HTML template every 30 seconds?-CodePudding

This is a parking app which refresh the available parking slots every 30 seconds WITHOUT refreshing page.

This is my .py with the route and render template

@views.route('/')
def home():
    while True:
        try:
            token=getToken()
            if(token!='null' or token!=''):
                plazas=getInfo(token,parkingID)
        except:
            print('Error en la conexion')
            time.sleep(secs)      
                return render_template("home.html", plazas=plazas)

My HTML is:

  <script  src="{{ url_for('static', filename='js/main.js') }}"></script>
 <script type="text/javascript">
    myVar = setInterval(refresh,30000,{{plazas}});
  </script>
</head>
<title>Home</title>
</head>
    <body>
        <table>
            {% for parking in parkings %}
                <tr>
                    <td ><img src={{parking.image}} alt="img"></td>
                    <td >{{parking.nombre}}</td>
                    {% if plazas|int >= (totalplazas*30)/100 %}
                    <td  style="color:#39FF00">
                    {{plazas}}</td>
                    {% elif plazas|int < 1%}
                    <td  style="color:red"><p >COMPLETO</p></td>
                    {% elif plazas|int <= (totalplazas*10)/100%}
                    <td  style="color:red">
                    {{plazas}}</td>
                    {% else %}
                    <td  style="color:yellow">
                    {{plazas}}</td>
                    {% endif %}
                    <td ><img src={{parking.direccion}} alt="img"></td>
                </tr>
            {% endfor %}
        </table>
    </body>
</html>

And my JS:

var elements = document.getElementsByClassName("num");
function refresh(pl){
    elements.innerHTML = pl;
}

My problem is that the {{plazas}} variable always takes the initial value and is not updated every 30 seconds even if i use while true: loop in my .py. Any help?

CodePudding user response：

Your problem seems to be updating the rendered DOM periodically. You'll probably need JavaScript to handle that. There are plenty of frameworks that can enable this efficiently. Consider looking for popular solutions, like ReactJS or VueJS.

CodePudding user response：

A simple solution would be to get the data by fetching it from javascript using await fetch(). You can then set up an updater by using setInterval().

Flask

@app.route('/refresh')
def refresh();
  try:
    token=getToken()
    if(token!='null' or token!=''):
      plazas=getInfo(token,parkingID)
  except:
    return "Error refreshing!"

Javascript

var element = document.getElementsByClassName("num")

async function reload() {
  // make a request to reload
  const promise = await fetch("/refresh")
  // get the text from the request, alternatively you can also use .json() to 
  // retrieve json
  const text = await promise.text()
  element.innerHTML = text
}

// refresh every 30 seconds
window.onload = setInterval(reload, 30000)