How to use enhance Flask app with JavaScript
In my Hackathon project, I used 2 JavaScript plugins (SelectizeJS and ParticlesJS) to style the website.
There are 2 ways to import/use JavaScript into your website.
The first way is to import it inside the <head> or <body> tag. Do note that to import the JavaScript file, you have to use Jinja2 to reference the file inside a folder. In this case, the folder is called "static".
<script type="text/javascript" src="{{url_for('static', filename='js/selectize.js')}}"></script>
The second way is to write JavaScript inside the <script> tag. The <script> tag has to be inside a <body> tag.
<script>
$('#input-tags').selectize({
plugins: ['remove_button'],
persist: false,
selectOnTab: true,
maxItems: 15,
placeholder: "Enter your tags here",
create: true
});
</script>
Generally, you would import the JavaScript last in the <body> tag unless the JavaScript has to load its function to change something inside the <body> tag. In my case, the SelectizeJS has to load in the head tag to change the appearance of the tags input. By doing so, the time taken to render the webpage will be shorter.
Before moving into using JavaScript, here are a few important Jinja2 variable and filters you should know. You can look here for more Jinja2 syntax.
To reference a file or image like CSS or images, use the following method to reference it.
{{url_for('folder_name', filename='file_path_inside_folder_name')}}
To get a variable from your app.py
{{ variable_from_app_py|safe }}
To do a for-loop
{% for t in list_from_app_py %}
<option value="{{t}}">{{t}}</option>
{% endfor %}
To do an if statement
{% if kenny.sick %}
Kenny is sick.
{% elif kenny.dead %}
You killed Kenny! You bastard!!!
{% else %}
Kenny looks okay --- so far
{% endif %}
To use SelectizeJS, you need to download the JavaScript and CSS file. Then, include both of the files inside the <head> tag.
<script type="text/javascript" src="{{url_for('static', filename='js/selectize.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/selectize.css')}}" />
Then, include these code after your <select id="id-name"> or <input id="id-name"> tag. You can customize the JavaScript according to the documentation.
<script>
$('#id-name').selectize({
plugins: ['remove_button'],
persist: false,
selectOnTab: true,
maxItems: 15,
placeholder: "Enter your tags here",
create: true
});
</script>
My <select> tag looks like this.
<label for="tags">Tags</label>
<select id="input-tags" name="tags" multiple="multiple">
<option value="" selected>Select tags...</option>
{% for t in tags %}
<option value="{{t}}">{{t}}</option>
{% endfor %}
</select>
<!-- Use this if you are customizing input tag -->
<!-- <input id="input-tags" name="tags" value="{{ tags|safe }}" /> -->
<script>
$('#input-tags').selectize({
plugins: ['remove_button'],
persist: false,
selectOnTab: true,
maxItems: 15,
placeholder: "Enter your tags here"
});
</script>
To use ParticlesJS, you need to download the JavaScript file and create an app.js file to store the configurations. Then, include both the files at the end of body tag.
<script type="text/javascript" src="{{url_for('static', filename='js/particles.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/app.js')}}"></script>
The app.js should look like this. You can configure the ParticleJS here and download the JSON file. Paste the content of JSON file into app.js.
particlesJS('particles-js',
//paste everything from the JSON file here
);
Then, specify which element to have the background. In my case, I used <body> tag to contain the background. You can use it on <div> tags by specifying id="particles-js".
<body id="particles-js">
<!-- After all the html elements -->
<script type="text/javascript" src="{{url_for('static', filename='js/particles.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/app.js')}}"></script>
</body>
One important thing to note: If you are using ParticlesJS as your background and the inside the body contains a form, you have to change the z-index of particles-js to 0 and change the z-index of the form to 1.
Inside my CSS, I've set change the z-index of particles-js and form. Do note that the particle-js creates a canvas element.
/* ---- particles.js container ---- */
#particles-js{
width: 100%;
background-color: black;
background-size: cover;
background-repeat: repeat-y;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
form{
position: relative;
z-index: 1;
}