How to post the output result on the same page in flask app?

Question

I have a flask app that takes some text as an input, runs a python script and spits out an output on the same html page, except it goes to a new page. I don't see why it would go to a new page.

This is my app.py file:

#!/usr/bin/env python3

from flask import *
from flask import render_template
from myclass import myfunction

app = Flask(__name__)

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

@app.route('/', methods= ["POST"])
def background_process():
    if request.method == 'POST':
        try:
            story = request.form.get('story')
            if story:
                result = myfunction(story)
                return render_template('index.html', **jsonify(result))
            else:
                return jsonify(result='Input needed')
        except Exception as e:
            return (str(e))

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

And this is my index.html file:

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="../static/main.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type=text/javascript>
            $(function() {
              $('a#process_input').bind('click', function() {
                $.getJSON('/background_process', {
                  story: $('textarea[name="story"]').val(),
                }, function(data) {
                  $('#result').text(data.result);
                });
                return false;
              });
            });
        </script>
    </head>

    <body>
        <div class='container'>
            <form>
                <textarea id="text_input" rows="20" cols="80" name=story></textarea>
                <br>
                <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
            </form>
            <br>
            <p><h2 align='center'>Result:</h2><h2 id=result align='center'></h2></p>

        </div>
    </body>
</html>

When input is given, it shows the result in a new page on json format. I want to show it on the same page. What's going wrong here? Thanks!

You did not post `my_function()` which seems to do the major work. — Klaus D., Oct 11 '17 at 22:04
Less than a second. I think the problem is in get request. Probably get request cannot take so much text. I tried using post, but then I cannot get the output on the same page. — , Oct 14 '17 at 08:44

PRMoureu · Accepted Answer · 2017-10-14T22:31:55.950

As you are already using an ajax method able to handle the response, you could return the JSON response directly instead of rendering a new template:

return jsonify(result=result)

Also you may want to change GET to POST for the JQuery method :

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="../static/main.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type=text/javascript>
            $(function() {
              $('a#process_input').bind('click', function() {
                $.post('/', {  
                  story: $('textarea[name="story"]').val(),
                }, function(data) {
                  $('#result').text(data.result);
                });
                return false;
              });
            });
        </script>
    </head>

(Note that you need to write $.post('/background_process' if you keep two separated functions, and not the one i suggest below.)

Then you can gather the code in one function, the template will be rendered with a GET method, and the response will be rendered from a POST :

app = Flask(__name__)

@app.route('/', methods= ["GET", "POST"])
def homepage():
    if request.method == 'POST':
        story = request.form.get('story')
        if story:
            result = myfunction(story)
            return jsonify(result=result)
        else:
            return jsonify(result='Input needed')

    return render_template('index.html')

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

How to post the output result on the same page in flask app?

1 Answers1

Linked