title: How To Reload A Particular HTML Element(Table) in a Page When Data is Changed Using Python Flask?
body: <p>I am creating a hobby project which does the following. It gets my Tasks to be done for the day from Todoist and allows me to assign a estimated time for each task.</p>
  <p>The main page contains a Table which displays the tasks for the current date. I also have a date picker which allows me to select another date. My intention wth this date picker is, if user selects another date, my tasks for that particular date would be loaded.</p>
  <p>I have also created a python function that returns tasks for a particular day. Function takes date and api key as input.</p>
  <p>At present I am able to track changes in datepicker using javascript. But I have no idea how can I pass this date from Javascript to my python Function(Flask app)</p>
  <p><strong>app.py</strong></p>
  <pre><code>from datetime import date
  
  from flask import Flask, render_template, request, redirect, url_for,session
  from todoist_api_python.api import TodoistAPI
  from flask_session import Session
  
  
  import todoisttaskget
  
  app = Flask(__name__)
  # Check Configuration section for more details
  SESSION_TYPE = 'filesystem'
  app.config.from_object(__name__)
  Session(app)
  
  @app.route('/')
  def hello_world():
     return render_template('index.html')
  
  @app.route('/settings',methods = ['POST', 'GET'])
  def settings():
      #messages = request.args['messages']
      #print(messages)
      tasks_list = []
      if request.method == 'POST':
          result = request.form
          api_key = result['key']
          session['apikey'] = api_key
          session['date'] =  date.today()
          api_status = todoisttaskget.check_apikey(api_key)
          if(api_status == True):
              &quot;&quot;&quot;# Code For Correct API Key&quot;&quot;&quot;
  
              return redirect(url_for('show_tasks'))
  
          else:
              return render_template('settings.html',result =&quot;wrong&quot;)
  
      return render_template('settings.html')
  
  @app.route('/tasks')
  def show_tasks():
  
      api = TodoistAPI(session['apikey'])
      tasks_list = todoisttaskget.get_tasks_date(api,session['date'])
      return render_template('tasks.html',result = tasks_list)
  
  
  
  
  if __name__ == '__main__':
     app.run()
  </code></pre>
  <p><strong>tasks.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
      &lt;title&gt;Tasks&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;container&quot;&gt;
    &lt;h2&gt;Todays Tasks&lt;/h2&gt;
    &lt;p&gt;Please enter the estimated time for each task&lt;/p&gt;
      &lt;label for=&quot;selected_date&quot;&gt;Choose Date:&lt;/label&gt;
      &lt;input type=&quot;date&quot; id=&quot;selected_date&quot; name=&quot;selected_date&quot;&gt;
  
  
    &lt;table class=&quot;table table-hover&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Task Name&lt;/th&gt;
          &lt;th&gt;Estimated Time(In Minutes)&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      {% for task_name in result %}
  
        &lt;tr&gt;
          &lt;td&gt;{{ task_name }}&lt;/td&gt;
          &lt;td&gt;
              &lt;div class=&quot;form-group&quot;&gt;
              &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;etime&quot; name=&quot;estimatedtime&quot;&gt;
              &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
          {% endfor %}
      &lt;tr&gt;
          &lt;td&gt;Total Time&lt;/td&gt;
          &lt;td&gt;
              &lt;h3 id=&quot;totaltime&quot;&gt;0.00&lt;/h3&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;static/timeadd.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>timeadd.js</strong> - Contains Javascript to track event changes</p>
  <pre><code>var total_time = 0;
  
  
  const inputs = document.querySelectorAll('input.form-control');
  const total_time_header = document.querySelector('#totaltime');
  const selected_date = document.querySelectorAll('#selected_date');
  //Setting Value Of Date Field To Current Date
  var date = new Date();
  var currentDate = date.toISOString().substring(0,10);
  console.log(currentDate);
  selected_date.value = currentDate;
  console.log(&quot;Selected Date:&quot; + selected_date.value);
  
  
  //Events For Tracking Date Change
  selected_date.forEach((input) =&gt; {
  
    // and for each one we add a 'blur' listener
      input.addEventListener('change', () =&gt; {
      console.log(input.value);
  
    });
  });
  
  
  
  // we use the .forEach method to iterate through each button
  inputs.forEach((input) =&gt; {
  
    // and for each one we add a 'blur' listener
      input.addEventListener('change', () =&gt; {
      console.log(input.value);
      addtime();
  
  
  
    });
  });
  
  
  function addtime()
  {
      var total_time_new = 0;
      console.log(&quot;Total Time Inside AddTime():&quot;+ total_time);
      for(let i=0; i &lt; inputs.length ; i++ )
          {
              console.log(inputs[i].value);
              if(isNaN(parseInt(inputs[i].value)))
                  {
                      total_time_new = total_time_new + 0;
                  }
              else
                  {
                       total_time_new = total_time_new + parseInt(inputs[i].value);
                  }
          }//for loop
      total_time_string = timeConvert(total_time_new);
      total_time_header.innerHTML = total_time_string;
  }
  function timeConvert(n)
          {
                      var num = n;
                      var hours = (num / 60);
                      var rhours = Math.floor(hours);
                      var minutes = (hours - rhours) * 60;
                      var rminutes = Math.round(minutes);
                      return num + &quot; minutes = &quot; + rhours + &quot; hour(s) and &quot; + rminutes + &quot; minute(s).&quot;;
  
  console.log(timeConvert(200));
  
          }
  </code></pre>
  <p><strong>get_tasks_date function</strong></p>
  <pre><code>def get_tasks_date(api,input_date):
      tasks_list = []
      #input_date_obj =  parser.parse(input_date)
      #input_date_obj = input_date_obj.date()
      try:
          tasks = api.get_tasks()
          for task_items in tasks:
              task_id = task_items.id
              task_name = task_items.content
              due_date = task_items.due
              if hasattr(due_date,'date'):
                  due_date_obj = parser.parse(due_date.date)
                  due_date_obj = due_date_obj.date()
                  if(due_date_obj == input_date):
                      print(&quot;Task Name&quot;,task_name)
                      print(&quot;Task ID:&quot;,task_id)
                      tasks_list.append(task_name)
  
      except Exception as error:
          print(error)
      return tasks_list
  </code></pre>
  <p>Here is what I want to do:
  Whenever there is a change in date, I need to reload the table in tasks.html with the tasks for that particular date. Can you guide me on how to do that?</p>