1

I have created a table in "stat.html" file and I want the table inside should update in real time without refreshing all pages. Please, someone can help me with this. Thank you in advance! I tried ajax, but still did not succeed.

{% extends "layout.html" %}
{% block script %}

{% endblock %}

{% block title %}
Main Page 
{% endblock %}

{% block main %}
<!-------------------------------->
<div id="fetch">

<div class="justify-content-sm-center text-left py-3">
    <div class="row">
      <div class="col-lg-8 col-md-7 col-sm-12 float-left">
        <p class="h2">Real Time Production Status</p>
        <p class="color-text-secondary">You can manage your production speed, analyze the breakdowns and loads.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-8 col-md-7 col-sm-12 float-left">
        <div class="btn-group" role="group">
      <a id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
    <path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/>
  </svg> Add
      </a>
      <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
        <li><button class="dropdown-item" data-toggle="modal" data-target="#add_section">Add section</button></li>
        <li><button class="dropdown-item" data-toggle="modal" data-target="#add_project">Add project</button></li>
        <li><button class="dropdown-item" data-toggle="modal" data-target="#add_task">Add task</button></li>
        <li><button class="dropdown-item" data-toggle="modal" data-target="#add_subtask">Add subtask</button></li>
      </ul>
    </div>
      </div>
    </div>
  </div>
  
  
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#sections" type="button" role="tab" aria-controls="sections" aria-selected="false">Online</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#projects" type="button" role="tab" aria-controls="projects" aria-selected="true">Historical</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#tasks" type="button" role="tab" aria-controls="tasks" aria-selected="false">Tasks</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#subtasks" type="button" role="tab" aria-controls="subtasks" aria-selected="false">SubTasks</button>
    </li>
  </ul>


<!-------------------------------->
<div class="tab-pane fade show active" id="projects" role="tabpanel" aria-labelledby="profile-tab">This is projects tab
<table class="table table-striped table-hover text-left">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Chute No</th>
      <th scope="col">ND Boxes</th>
      <th scope="col">SD Boxes</th>
      <th scope="col">Full Count</th>
      <th scope="col">Full Time</th>
      <th scope="col">Block Count</th>
      <th scope="col">Block Time</th>
    </tr>
  </thead>
  <tbody class="">
    {% for Chute in Chutes %}
    <tr>        
        <td data-label="Chute No">{{loop.index}}</td>
        <td data-label="ND Boxes">{{ Chutes[loop.index-1][0] }}</td>
        <td data-label="SD Boxes">{{ Chutes[loop.index-1][1] }}</td>
        <td data-label="Full Count">{{ Chutes[loop.index-1][2] }}</td>
        <td data-label="Full TIme">{{ Chutes[loop.index-1][3] }}</td>
        <td data-label="Block Count">{{ Chutes[loop.index-1][4] }}</td>
        <td data-label="Block Time">{{ Chutes[loop.index-1][5] }}</td>
        
    </tr>  
    {% endfor %}
  </tbody>
</table>

</div>
</div>


{% endblock %}

and app.py is here. Are there any ways to update the table Chutes automatically every one second without refreshing all pages?

from flask import Flask, render_template, redirect, jsonify, request

from forms import *
import plc

from threading import Thread


app=Flask(__name__)


@app.route("/",methods=["GET","POST"])
def index():
    
    #print(RD.Chute)
    return redirect("/stat")


#Real Time Statistical Data
@app.route("/stat",methods=["GET","POST"])
def stat():
    RD=plc.ReadData    
    RD.plc_read()
   
    return render_template('stat.html',Chutes=RD.plc_read())
Siri
  • 29
  • 5

0 Answers0