Flask flash message no longer works when using ajax

Question

When I submitted my form data using form action I was able to flash messages back.

View for form:

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

Register.HTML

<form action="{{ url_for('processRegister') }}" method=post>
        <dl>
          <dt>email:
          <dd><input type="text" name="email" id="email">
          <div id="emailBlank" class="error"><font color="red">email cannot be blank</font></div>
          <div id="emailFormat" class="error"><font color="red">invalid email format</font></div>
          <dt>Password:
          <dd><input type="password" name="password" id="password">
          <div id="pwBlank" class="error"><font color="red">password cannot be blank</font></div>
          <dt>Enter password again:
          <dd><input type="password" name="password2" id="password2">
          <div id="pw2Blank" class="error"><font color="red">verify password field cannot be blank</font></div>
          <dd><input type="submit" value="submit" id="submit"><br><br>
        </dl>
        </form>
      <a href="{{ url_for('verifyEmailForm') }}">send another verification email</a>
    {% endblock %}

Now that I am using ajax my flash messages no longer appear.

$(document).ready(function(){
   (code removed for clarity)

            if (error == false) {
                $.ajax({
                  type: "POST",
                  url: "/processRegister",
                  data: { varEmail: email, varPassword: pw}
                });//ajax call
            }//end if
        });//submit
    });//load validate.js
});//doc rdy

My view to process form data:

@app.route('/processRegister', methods=['POST'])
    def processRegister():
        if request.method == 'POST':
            email = request.form['varEmail']
            flash("message -----> " + email)
        return render_template('register.html')

My layout page uses the below snippet for flashing:

{% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes>
    {% for message in messages %}
      <li>{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}

Answer 1

Flashed messages are stored as part of the session, and are retrieved when rendering the template on the server side. The session cookie is not accessible to client side JavaScript. Even if it was, it is not easily decoded in JavaScript. Even if you could decode it, that assumes the session is a cookie and not stored on the server or something else.

If you want to render some messages in response to an AJAX request, you should send those messages in the response and render them in the handler you write in JavaScript. Flashed messages are provided as a convenience when using redirects, but since you're using AJAX you can skip this middle step and just return the messages directly.