Don't render whole template with Flask

Question

i'm always using the standard Flask-command render_template(), well, to render my templates. The whole template is just static, but there is one form, which is changing after user's input and one image-slider. Now the issue: When the user submits his/her input the wohle template gets re-rendered.

Is it possible that i just update the form-data and leave the rest of the page untouched?

My template looks like that:

<html>
<head>
</head>
<body>
<form action="/" method ="POST" id="Form">
    {{msform.ms_1}} is to {{msform.ms_2}} like {{msform.ms_3}} is to {{msform.ms_submit}}
</form>
</body>
</html>

My views.py follows:

@app.route('/', methods=(['GET','POST'])
def index():
    if request.method == 'POST':
        msform = msForm(request.form, prefix='ms')
        msform.ms_submit.label.text= msform.ms_3.data + msform.ms_2.data
        return render_template(template, msform=msform)
    return render_template(template, msform=msform)

Where should i place the first answer? Thanks, FFoDWindow

Sounds like [you really just want to know how to disable page refresh on form submit](http://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit). — Akshat Mahajan, May 17 '16 at 06:50
yeah kind of. But i just want to re-render my form - after a valid input. Isn't there any command in Flask to do this? — malwin, May 17 '16 at 09:21
Flask runs on the server, the form runs on the client. The only way for those two to communicate is using HTTP requests. If you submit a form, you get a request which necessarily needs to result in a new respose with its own HTML. If you want to avoid rerendering everything, you need AJAX. That has nothing to do with Flask though. — poke, May 17 '16 at 15:06

score 0 · Answer 1 · edited Sep 21 '20 at 14:54

If you want the form to send a request with the data without reloading the whole page, then the solution is to send the form data using a XHR request (AJAX request) using JavaScript.

There's no way for the server to refresh just a portion of a template after it's been sent to the browser. HTTP is stateless, so after your browser makes the submit request, the server replies with the template you render, and that's it.

If you need to "replace" or "re-render" just a portion of the page without doing a full page reload, you need JavaScript and and XHR request.

You would need to create a Flask endpoint to receive the POSTed data. Example using jQuery:

$("#your-form").submit(function(e) {
    e.preventDefault(); // Prevent the normal form submit

    $.ajax({
           type: "POST",
           url: '/your-api',
           data: $("#your-form").serialize(),
           success: function(data) {
               // Do something here. For example, the server can return JSON here and you use Js to create the template client-side, or you server can return an HTML fragment and here you append it to a dom node
           }
         });
});

Normally, these kind of endpoints returns JSON, but if you want to stick with your server side templates as much as possible, you could return the re-rendered form as a response to the AJAX call, and then append with jQuery that response into the container element, effectively replacing the form.

Let's say you're using Jinja2 as a template engine. Then you can have a partial for the form which you normally include in the main template when you render the full page the first time. You then can render just the same partial when you respond to the AJAX request on submit.

Hope this is helpful.

Hey, thank you for your response. This may help me, but i actually have no idea how to use your answer... I will edit my question and give you a minimal-working-example. Any further suggestions are welcome! — malwin, May 17 '16 at 14:53

Don't render whole template with Flask

1 Answers1