I am trying to set the default value of an input in html with one that I get in the json from my ajax update function. The value is getting back from the ajax correctly, but I am having a devil of a time using it in the html.
I have created a "namespace" to contain my variables. How do I use the variables in my html? Note that ".innerHTML" and ".value" don't work because (I'm guessing) this is an input with min, max, step? If I replace {{ myNamespace.low_pump_speed_value }} with an acceptable number (between 800 and 1500), the code works as expected.
I am getting the following error:
jinja2.exceptions.UndefinedError: 'myNamespace' is undefined
Here is the html file:
<body>
<script>
myNamespace = { low_pump_speed_value: 850,
high_pump_speed_value: 950,
chlorine_percent_value: 1050};
document.write(myNamespace)
console.log("second", myNamespace)
</script>
<label for="low-pump-speed-id">Low Pump Speed:</label>
<input type="number" id="low-pump-speed-id" name="low-pump-speed-id" step="50" min="800" max="1500" required value="{{ myNamespace.low_pump_speed_value }}">
</body>
<script type="text/javascript">
setInterval(function(){$.ajax({
url: '/update',
type: 'POST',
success: function(response) {
myNamespace.low_pump_speed_value = response["pump"]['low-speed'];
},
error: function(error) {
console.log(error);
}
})}, 250);
</script>
You should use values within the max..min range, for example:
myNamespace = { low_pump_speed_value: 900,
Then, you can assign this value to the input field as follows:
var inputField = document.getElementById("low-pump-speed-id");
inputField.value = myNamespace.low_pump_speed_value;
Thanks (bedankt) to www.admiraalit.nl, this is now working: I have to believe that it was something stoopid I was doing as I thought I started out this way and just wound up in the weeds.
<!DOCTYPE html>
<form class="form-inline" method="POST" action="{{ url_for('override_select') }}">
<link rel="shortcut icon" href={{ url_for('static',filename='favicon.png') }} />
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/root.css') }}">
</head>
<body>
<label for="low-pump-speed-id">Low Pump Speed:</label>
<input type="number" id="low-pump-speed-id" name="low-pump-speed-id" step="50" min="800" max="1500">
<label for="high-pump-speed-id">High Pump Speed:</label>
<input type="number" id="high-pump-speed-id" name="high-pump-speed-id" step="50" min="800" max="1500">
<label for="chlorine-percent-id">Chlorine Percent:</label>
<input type="number" id="chlorine-percent-id" name="chlorine-percent-id" step="50" min="800" max="1500">
</body>
<script type="text/javascript">
setInterval(function(){$.ajax({
url: '/update',
type: 'POST',
success: function(response) {
document.getElementById("low-pump-speed-id").value = response["pump"]['low-speed'];
document.getElementById("high-pump-speed-id").value =response["pump"]['high-speed'];
document.getElementById("chlorine-percent-id").value = response["chlorinator"]['chlorine-percent'];
},
error: function(error) {
console.log(error);
}
})}, 2000);
</script>
</form>