jquery updating page with Flask returned html

Question

I am trying to submit form data to flask using jquery ajax request and then adding the returned html to the current page. I've tried tweaking according to similar answers on other threads, but nothing works. I'm not getting errors in the console, just no response.

html with script:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <title></title>
</head>
<body>
<h1>Add Numbers!</h1>
<div id="bread">
    <form action="" id="numberAdd" role="form">
        <div id="content">
            <div id="bob">
                <label>Bob Has:</label>
                <input type="text" id="bobNum" name="bob">
            </div>
            <div id="sam">
                <label>Sam Has:</label>
                <input type="text" id="samNum" name="sam">
            </div>
            <button type="submit" id="num-butt">Submit</button>
        </div>
    </form>
</div>
<script>
$(document).ready( function() {
        $(":button").click(function(){
    $.post('/addNumber', $('form').serialize(), function(response){
        $('#reply').empty().append(response);
        });
    });
  });

</script>
<div id="reply">
</div>
</body>
</html>

Flask:

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

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

@app.route('/addNumber', methods=["GET", "POST"])
def addNums():
    x = int(request.form['bob'])
    y = int(request.form['sam'])
    z = x + y
    return render_template('test.html',z=z)

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

keithb · Accepted Answer · 2015-10-07 06:58:12Z

1

The reason you're not seeing the ajax request when clicking the Submit button is because at the same time the ajax call is made, the browser is submitting the form back to the server and then loading the results.

You can prevent that from happening a few different ways, but the simplest in your example is changing the button type to "button" instead of "submit"

<button type="button" id="num-butt">Submit</button>

answered Oct 7, 2015 at 6:58

keithb

1,99016 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kmoses Over a year ago

Thanks! Works perfectly now.

Collectives™ on Stack Overflow

jquery updating page with Flask returned html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related