Flask - Store feedback data to server

Question

I am using a flask application as the server. I simply return a users transactions. However, I need to allow the user to give the server feedback if a transaction was wrong.

from flask import Flask, render_template, request
import pandas as pd
pd.set_option('display.max_colwidth', -1)

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

@app.route("/submit", methods=['GET','POST'])
def submit_table():
    if request.method == 'POST':
        if request.form['submit'] == 'Get Started!':
            last_month_txn = pd.read_csv("./Predicted_Reoccuring_Payments.csv")
            last_month_txn = last_month_txn[["processing_dt", "narrative","transaction_amt", "trans_type_desc"]]
if __name__ == '__main__':
   app.run(port=5050, threaded=True)

The submit_table function will read in a pandas dataframe and send it to the page. This works when a user logs in. I have not included the log in form. I have a bootstrap modal which is brought up if a person wants to dispute an entry in the table.

 <form  method = "POST" action="submit">
  <div class="modal fade modal-admin" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title" name="feedback">Submit Feedback</h3>
        </div>
        <div class="modal-body">
            <h4>Please provide feedback about this transaction</h4>

          <div class="form-group" style="padding:20px;">
            <label for="text_area">Additional information</label>
            <textarea class="form-control mywidth" id="text_area" rows="3" name="text_area"></textarea>
          </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="submit_modal" data-dismiss="modal">Submit</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

I need to log this data, specifically the contents of the textarea, into some file on the server. I don't want the webpage to redirect/refresh when they hit submit. Is there a way for flask to get the contents of this form without affecting the url/web address?

Answer 1

I think you have to use the Ajax Request in javascript. You can do it with Jquery (which is pretty easy) or in classic javascript.

Edit : You can find some docs on google !

Small exemple :

$.ajax({
  type     : 'POST',
  url      : '/path_url',
  dataType : "json",
  contentType: 'application/json;charset=UTF-8',
  data     : JSON.stringify(dict_var),
  success : function (result) {
    console.log(result)
  },
  error : function (error) {
    console.log(error);
  }
});

With dict_var which is a dictionnary, you just need to recover data from your form (pretty simple) and send it through dictionnary.

And in flask, you just need to read data in your route:

data = json.loads(request.data)
tmp = data["key"]

Peace