0

I am using AJAX and Flask to allow column names in a pandas dataframe to be changed via a web-app.

It works except that it crashes. It seems to be using POST to send the new column names to the server, and then send the updated dataframe back to the client.

But then it seems to send a GET request that is not allowed and so crashes. You can see the initial POST request (200) and the following GET request (405):

127.0.0.1 - - [09/May/2018 18:19:23] "POST /process HTTP/1.1" 200 -

127.0.0.1 - - [09/May/2018 18:19:23] "GET /process?eq_site_limit=1&hu_site_limit=2&fl_site_limit=3&fr_site_limit=7 HTTP/1.1" 405 -

I could use return flask.render_template to return an html page, but then I would be refreshing the web page and I'm trying to do this without doing that.

Any ideas why the GET request is fired and how to prevent it?

Here is the flask app:

@app.route('/process', methods=['POST'])
def process():
    df = pd.read_csv('../data/df_reduced_cols.csv')
    existing_cols = list(df.columns)
    form_results = request.form
    for k, v in form_results.items():
        df.rename(columns={k: v}, inplace=True)
    new_columns = list(df.columns)
    new_head = print_head(df)

    return jsonify(new_head = new_head)

This is the AJAX:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            var dataResults = $("form").serializeArray();
            $.ajax({
                data: dataResults,
                type : 'POST',
                url : '/process'
            })
        });
    });
</script>

And this is the HTML:

<form action="/process">
   <table class="table table-hover">
   <thead>
      <tr>
         <th scope="col">Old Name</th>
         <th scope="col">New Name</th>
      </tr>
   </thead>
   <tbody>
      {% for col in columns %}
      <tr>
         <td>{{col}}</td>
         <td>
            <input type="text" name="{{col}}" placeholder="New Column Name">
         </td>
      </tr>
      {% endfor %}
      <button type="submit" class="btn btn-primary" >Submit Here</button>
</form>
<h1><small>{{new_head}}</small></h1>

Thank you for any pointers!

HCV
  • 11
  • 4
  • ... and [prevent refresh of page when button inside form clicked](https://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked) – Phil May 10 '18 at 05:22

0 Answers0