CODEWITHSUNDEEP
pythonflasksijax
WoltjerD
WoltjerD

Reputation: 463

Flask: how to update div after processing form inputs

My Flask app does calculations based on user form inputs. These calculation take about 10 seconds to complete. The output of those calculations need to be displayed in a div on the same page, next to the form (in a chart / table etc).

I have tried two aproaches. The first, using normal just Flask, reloads the whole page, which is far from ideal. The second approach, using Sijax, updates just the div. But in this case, i don't know how to access the form inputs.

I'm confused how to get this working. Would appreciate any directions!

Approach 1: just flask (downside: whole page reloads)

form_test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testpage</title>
</head>
<body>
    <form  action="{{ url_for('do_the_math') }}" method="post">
        A = <input type="number" name="input_A">
        B = <input type="number" name="input_B">
        <input type="submit" value="Submit">
    </form>
<div id="destination_div">A + B = {{ result }}</div>
</body>
</html>

app_normal.py:

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route("/")
def show_home():
    return render_template("form_test.html", result='unknown yet')

@app.route("/do_the_math", methods=['POST'])
def do_the_math():
    A = request.form.get('input_A')
    B = request.form.get('input_B')
    sum = float(A) + float(B)

    # reloads whole page
    return render_template("form_test.html", result=sum)

    # what i want: reload just update destination_div with new HTML
    # return render_template("#destination_div", "A + B = " + str(sum))

if __name__ == '__main__':
    app.run(debug=True)

Approach 2: use Sijax (updates div, but how to access form inputs?)

form_test_sijax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testpage with sijax</title>
    <script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</head>
<body>
    <form method="post">
        A = <input type="number" name="input_A">
        B = <input type="number" name="input_B">
        <button type="button" onclick="Sijax.request('submit_form');">calc</button>
    </form>
<div id="destination_div">A + B = unknown</div>
</body>
</html>

app_sijax.py

from flask import Flask, render_template, g
import flask_sijax
import os

app = Flask(__name__)

# init sijax
app.config["SIJAX_STATIC_PATH"] = os.path.join('.', os.path.dirname(__file__), 'static/js/sijax/')
app.config["SIJAX_JSON_URI"] = '/static/js/sijax/json2.js'
flask_sijax.Sijax(app)


def submit_form_handler(obj_response):
    A = 5  # how do get to the values entered in the form?
    B = 3
    sum = A + B
    obj_response.html("#destination_div", "A + B = " + str(sum))


@flask_sijax.route(app, "/")
def show_home():
    result = 'unknown'
    if g.sijax.is_sijax_request:
        g.sijax.register_callback('submit_form', submit_form_handler)
        return g.sijax.process_request()
    return render_template("form_test_sijax.html")


if __name__ == '__main__':
    app.run(debug=True)

Upvotes: 1

Views: 6197

Answers (1)

Ajax1234
Ajax1234

Reputation: 71451

You can use ajax with jquery to dynamically update the page with the computed result without having to refresh the page:

In the html file:

<html>
  <header>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </header>
 <body>
    <div class='wrapper'>
      A = <input type="number" id="input_A">
      B = <input type="number" id="input_B">
      <button class='get_result'>Calculate</button>
      <div class='result'></div>
    </div>
 </body>
 <script>
    $(document).ready(function(){
      $('.wrapper').on('click', '.get_result', function(){
         var val1 = $("#input_A").val();
         var val2 = $("#input_B").val();
         $.ajax({
          url: "/calculate_result",
          type: "get",
          data: {val1: val1, val2:val2},
          success: function(response) {
            $(".result").html('<p>'+response.result.toString()+'</p>');
          },
         });
      });
    });
 </script>
</html>

Then, in the main app file, create the route to calculate the final result:

@app.route('/calculate_result')
def calculate_result():
  a = int(flask.request.args.get('val1'))
  b = int(flask.request.args.get('val2'))
  return flask.jsonify({"result":a+b})

Upvotes: 9

Related Questions