עבודה עם AJAX לדפדוף בין רשומות

<script>

 function showproj(str) {

   var xhttp;    

   if (str == "") {

     document.getElementById("txtHint").innerHTML = "";

     return;

   }

   xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {

     if (this.readyState == 4 && this.status == 200) {

       document.getElementById("txtHint").innerHTML = this.responseText;

     }

   };

   xhttp.open("GET", "/projects", true);

   xhttp.send("filtered=" + document.getElementById('projects').value));

 }

</script>

<form action=""> 

<select name="projects" onchange="showproj(this.value)">

<option value="">Select a project:</option>

{% for p in proj %}

  <option value="{{p['project_id']}}">{{p['project_name']}}</option>

{% endfor %}

</select>

</form>

<br>

</div>

<div class="container" id="txtHint">

  <h2>Projects</h2>

  <p>List of all active projecct</p>

  

  <table class="table table-striped">

    <thead>

      <tr>

        <th>ID</th>

        <th>Project</th>

        <th>Budget</th>

        <th>Forcast</th>

        <th>End date</th>

        <th>Comments</th>

      </tr>

    </thead>

    <tbody>

        {% for p in proj_list %}

        <tr method="POST" action="/projects/">

          <td>

            <a href="/projects/{{p['project_id']}}">

              {{p['project_id']}}

            </a>

          </td>

          <td>{{p['project_name']}}</td>

          <td>{{p['budget']}}</td>

          <td>{{p['forcast']}}</td>

          <td>{{p['completion']}}</td>

          <td>{{p['comments']}}</td>

        </tr>

        {% endfor %}     

    </tbody>

  </table>

</div>

@app.route('/projects/', methods=['GET', 'POST'])

def jsonproj():

    if request.method == 'POST':

        # filter_id = request.form['filtered']

        proj_list = [row for row in Projects.select().where(

            Projects.project_id == filter_id).dicts()]

        return jsonify(proj_list)

<script type="text/javascript">
  function showproj(str) {
    var req = new XMLHttpRequest();
    var result = document.getElementById('result');
    req.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        result.innerHTML = this.responseText;
      }
    };
    req.open("GET", "/projects", true);
    req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    req.send("selection=" + document.getElementById('selection').value));
  }