Estoy tratando de establecer el valor predeterminado de una entrada en html con uno que obtengo en el json de mi función de actualización de ajax. El valor es volver del ajax correctamente, pero estoy pasando un mal rato usándolo en el html.
He creado un "espacio de nombres" para contener mis variables. ¿Cómo uso las variables en mi html? Tenga en cuenta que ".innerHTML" y ".value" no funcionan porque (supongo) esta es una entrada con min, max, step. Si reemplazo {{ myNamespace.low_pump_speed_value }} con un número aceptable (entre 800 y 1500), el código funciona como se esperaba.
Estoy teniendo el siguiente error:
jinja2.exceptions.UndefinedError: 'myNamespace' is undefinedAquí está el archivo html:
<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>Debe usar valores dentro del rango max..min, por ejemplo:
myNamespace = { low_pump_speed_value: 900,Luego, puede asignar este valor al campo de entrada de la siguiente manera:
var inputField = document.getElementById("low-pump-speed-id"); inputField.value = myNamespace.low_pump_speed_value;Gracias (bedankt) a www.admiraalit.nl , esto ahora está funcionando: tengo que creer que fue algo estúpido lo que estaba haciendo, ya que pensé que comencé de esta manera y terminé en la maleza.
<!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>