Issue
I am creating a Flask app, and I'm just starting trying to mix flask and javascript, my script is suuuuper easy:
<!DOCTYPE html>
<html>
<body>
<button id="mybtn">click me to start</button>
<p>click the button to start the count</p>
<p id="demo"></p>
<script>
document.getElementById("mybtn").addEventListener("click", startTimer);
var t = 0;
function startTimer(){
var myVar = setInterval(myTimer, 5000);
}
function myTimer() {
t = t + 1;
//var d = new Date();
//var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script>
</body>
</html>If I try to implement this into flask, it fails to start the counting... Why? What am I doing wrong? The Flask output doesn't show a thing, no errors, not even a glimpse of what could I be doing wrong.
<!DOCTYPE html>
{% extends "base.html" %}
{% block leftsidebar %}
<form method="POST">
<div class="bs-component">
<div class="card border-dark mb-3" style="max-width: 20rem;">
<div class="card-header">start the thing</div>
<div class="card-body">
<input type="submit" id="btncapt" class="btn btn-primary" name="start" value="start">
<img src="{{ img_source }}" style="width:80px;height:40px;" onerror="this.style.display='none'">
</div>
</div>
</div>
</form>
<div class="bs-component">
<div class="card border-dark mb-3" style="max-width: 20rem;">
<div class="card-header">Respuesta</div>
<div class="card-body">
<p class="card-text" id="updtval">
</p>
</div>
</div>
</div>
<script>
document.getElementById("btncapt").addEventListener("click", startTimer);
var t = 0;
function startTimer(){
var setime = setInterval(myTimer, 5000);
}
function myTimer(){
t = t + 1;
document.getElementById("updtval").innerHTML = t;
}
</script>
{% endblock %}
This is my flask app:
@app.route('/vistgen', methods = ['GET','POST'])
def vgen():
img_pause = '/static/img/bootstrap_icons/pause-circle.svg'
img_working = '/static/img/animated_captura.gif'
if request.form.get('start') == 'start':
return render_template('vistgen.html', img_source = img_working)
else:
return render_template('vistgen.html', img_source = img_pause)
Solution
This is not because of "merging" flask with js, but how the form tag in HTML works.
When a form is submitted in HTML, with <input type="submit">, the action page of the form is loaded. Since it's the same page here, the page will be reloaded on submit, which means all javascript in the browser is reset (in a way).
I am assuming you are trying to submit the form without reloading the page, it is possible with async requests and you can do it by adding the following js. But note that the page won't be reloaded, so any HTML that you might be generating on the server(flask side) will not be updated (but form will be submitted in the background).
document.addEventListener("submit", (e) => {
// Store reference to form to make later code easier to read
const form = e.target;
// Post data using the Fetch API
fetch(form.action, {
method: form.method,
body: new FormData(form),
});
// Prevent the default form submit
e.preventDefault();
});
You can see more info regarding this and how to extend here: https://pqina.nl/blog/async-form-posts-with-a-couple-lines-of-vanilla-javascript/
Answered By - Palash Bansal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.