Flask app, button refreshes the browser. How to prevent it?

Question

I am working on building a simple app with Python Flask. I am having a problem with the button inside of this form. Users can comment and then push the button to post their comment.

When this button is clicked, the form action(this action in python, redirects to the current page.) is fired. Now, when the button is clicked, the comment is posted on the browser but the browser is refreshed. I don't want the browser to be refreshed every time when users post their comment. How should I make this button not to refresh the page and still post the comment and show the comment on the page without refreshing the page?

<form method="POST" action="{{ url_for('feed_app.message', message_id=fm.message.id) }}" role="form" enctype="multipart/form-data">
  {{ form.hidden_tag() }}
  <div class="form-group">
    {{ form.post(class='form-control', rows=1, style="background-color:#ffffff;width:200px;display:inline-block;") }}
    <input type="hidden" name="to_user" value="{{ user.username }}" />
    <button style="border-radius:5px;" type="submit" class="btn btn-success">Comment</button>
  </div>
</form>

This is the python code.

@feed_app.route('/message/<message_id>', methods=('GET', 'POST'))
def message(message_id):
    form = FeedPostForm()
    message = None

    user = User.objects.get(username=session.get('username'))
    message = Message.objects.filter(id=message_id).first()
    if not message:
        abort(404)

    if message and message.parent:
        abort(404)

    if form.validate_on_submit() and session.get('username'):
        # process post
        from_user = User.objects.get(username=session.get('username'))
        post = form.post.data

        # write the message
        comment = Message(
            from_user=from_user,
            text=post,
            message_type=COMMENT,
            parent=message_id
            ).save()

        return redirect(url_for('home_app.home', message_id=message.id))

    return render_template('feed/message.html',
        message=message,
        form=form
    )

Is it because I set the message to redirect to the current page? I am not sure if this is an HTML problem or Flask problem.

6

You need to use ajax – Samuel Muiruri Mar 16 '18 at 06:54

Artsiom Praneuski · Accepted Answer · 2018-03-16T08:37:01.240

Now, when the button is clicked, the comment is posted on the browser but the browser is refreshs

This is how synchronous requests actually work.

To achieve your goal you need to use either asynchronous requests (AJAX) or websocket. If you new to web development - it's recommended to start with AJAX using jQuery for example and once this technology is learned - it will be easy to start to work with websockets.

AJAX requests are regular HTTP requests (GET, POST, etc..) but they are asynchronous that means 1) not necessary to refresh browser page 2) not necessary to wait for server response so front end scripts can do another work instead of waiting for response.

Here you can find more info about sending AjAX requests using jQuery.

Flask app, button refreshes the browser. How to prevent it?

1 Answers1