Remove Flash Message from Flask Web Application
Using (a little) JavaScript
For quite some time I have had trouble making my flash banner disappear from my Flask websites. Flash is the little banner that drops down after a user has logged on successfully notifying the user of a successful logon. It’s useful for warnings and other things as well. It is easy to use because flash is part of the Flask library.
Sometimes the banner will cover parts of the site the user will want to view so it would be nice to make it disappear while not having to reload the page. When I say reload, I do not mean clicking the reload button on the browser navigation. That will just resend the last call that caused the banner to show. This won’t do any good. It will just annoy the user.
When I say reload, I mean using a button on your page that sends another post request to regenerate this page without the flash banner. I don’t want to do that because it’s a little cumbersome.
Instead, we can use a little bit of JavaScript to remove the banner. This is simple and much less disruptive to the user experience.
Disclaimer, I’ve done my best to search flask documentation and there doesn’t seem to be anything on removing the banner after it shows. Therefore, I assume there isn’t a functionality for actively making the banner disappear. I believe there is a method for setting a timer for it to disappear but I’m not a fan of that option.
The solution described here uses a small amount of JavaScript … and I mean a small. It super easy.
Here is the Github repository.
The snipped below from the home.html file shows what is needed to add to the flash div. I added an input that is just the image of an “X” so the user can see something familiar used to close windows, dialog, etc,. The button value=✖ is one of the html codes for an “X”. In the same input I added the “onclick” method that calls the function that is written at the bottom of the html file.
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class=”alert alert-{{ category }}” id=”div_flash” >
{{ message }}
<input type=”button” value=✖ onclick=”removeFlash()” style=”float: right”>
</div>
{% endfor %}
{% endif %}
{% endwith %}“Onclick” does not have to be in an input. It works directly on the div as well. If you were to remove the input with the “X” and just add ‘onclick=“removeFlash()”’ to the div, the function will still work. Then instead of the user clicking on an “X” they can click anywhere on the banner.
Here is all the javascript one needs to make an object disappear.
<script>
function removeFlash() {
const element = document.getElementById(‘div_flash’);
element.remove();
}
</script>Hiding and Unhiding
We can take this further. Instead making things disappear by removing them we can hide them as well. In this example, I don’t even need to use flask to produce the object. I’m only hiding html elements, but this works in a page managed by flask as well.
To produce this I created a div with an id=”email_div” which contains a label and a text input. Below it I have an input button that I will use to toggle between hiding and unhiding the email_div.
In the script at the bottom of hide_unhide.html, I make the my_element variable. I won’t try to explain how JavaScript syntax works, but as you can see its fairly straight forward. We are basically reconfiguring the display property from “inline” (being one of the defaults of displays) to “none”.
<head>
<title>Hide/Unhide</title>
</head>
<body>
<h1>Example Hide and Unhide</h1>
<div id=”email_div”>
<label>Email:</label>
<input type=”text” id=”email” name=”email_text”>
<input type=”submit” id=”btn_subtmit” value=”submit”>
<br><br>
</div>
<input type=”submit” id=”btn_hider” value=”toggle submit” onclick=”hideUnhide()”><script>
function hideUnhide() {
var my_element = document.getElementById(“email_div”);
if (my_element.style.display === “none”) {
my_element.style.display = “inline”;
} else {
my_element.style.display = “none”;
}
}
</script>
</body>
</html>
The removing part was so simple I did a little more research and found this last hiding/unhiding part in W3 schools, so I just want to give them credit. I’m sure this was all over the internet but for months I’ve just been avoiding this little detail and left my websites with the banners down. If you’re anything like me (using only Python/HTML/CSS), it helps to make the connection with a little bit of JavaScript that can be used often and you won’t need to rely on finding the perfect widget from bootstrap or another package for your front end.
