[FIXED] Refresh Data Table Without Reloading The Page

Issue

I use this Flask code to manually display SQLAlchemy Data:

@portfolioPath.route('/portfolio', methods=['GET','POST'])
def portfolio():
    if request.method == 'POST':
        all_data = HoldingsTable.query.all()
        return render_template("portfolio.html", all_data_html = all_data)

in this dynamic HTML table that shows the queried data here:

<!-- Equity Holdings Overview Table -->
<table class="table table-hover table-striped table-sm">
  <tr>
    <th>ID</th>
    <th>Trade Date</th>
    <th>Name</th>
    <th>Symbol</th>
    <th>Shares</th>
    <th>Purchase Price</th>
  </tr>
  {% for row in all_data_html %}
  <tr>
    <td>{{row.id}}</td>
    <td>{{row.date_purchase}}</td>      
    <td>{{row.name}}</td>
    <td>{{row.ticker}}</td>
    <td>{{row.shares}}</td>
    <td> &#x24; {{row.price_purchase}}</td>
  </tr>
  {% endfor %}
</table>

with this refresh button that manually displays or refreshes the data table, but the inconvenience is that it reloads the whole page with it:

<form action="{{url_for('core.portfolio')}}" method="POST">
  <div class="form-group">
      <div class="row align-items-start">
        <div class="col-md-2 col align-self-end">
          <button class="btn btn-primary float-end" type="submit" style="margin:5px;">1. Refresh!</button>             
        </div>
    </div>
  </div>
</form>

So, I tried to add Ajax/jQuery to load the data in the table without reloading the overall each time. So, I tested with this small code in the same files:

  <h3>What's 1 + 1?</h3>
  <form>
    <input type=text size=5 name=proglang>
    <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
  </form>
<p id=result></p>

of course, the python function is as follow:

@portfolioPath.route('/background_process')
def background_process():
    try:
        lang = request.args.get('proglang', 0, type=str)
        if lang.lower() == '2':
            return jsonify(result='You are wise')
        else:
            return jsonify(result='Really?')
    except Exception as e:
        return str(e)

and the jQuery script looks like this:

<script type=text/javascript>
  $(function() {
    $('a#process_input').bind('click', function() {
    $.getJSON('/background_process', {
      proglang: $('input[name="proglang"]').val(),
    }, function(data) {
      $("#result").text(data.result);
    });
    return false;
    });
  });
</script>

So, I did try to change the script to reload just the table:

<script type=text/javascript>
  $(function() {
    $('a#wallet_refresh_id').bind('click', function() {
    $.getJSON('/wallet_refresh', function(all_data_html) {
      $("#table").html(all_data_html);
    });
    return false;
    });
  });
</script>

with the linked flask back-end part:

@portfolioPath.route('/wallet_refresh', methods=['POST'])
def wallet_refresh():
    if request.method == "POST":
        all_data = HoldingsTable.query.all()
        return render_template("portfolio.html",
                                all_data_html = all_data
                                )
    return render_template("portfolio.html")

and a new submit button:

<form id="wallet_table_form">
<h3>REFRESH THE DATABASE</h3>
<form>
  <a href=wallet_refresh id=wallet_refresh_id><button class='btn btn-default'>Submit</button></a>
</form>

But clearly, I'm mixing things up here because nothing happens, what's the catch, please?

Solution

made it work thanks! Had to create a new route for it

Answered By - HumanBot