Soy nuevo en javascript, he creado un sitio de matraz y me gustaría seguir el trabajo de la torre ansible. He creado una ruta específica:
@app.route("/tower/<int:id>", methods=['POST','GET']) def status(id): launch = True job_info = {} status = refreshstatus(id) return render_template( 'tower.html', job_info = job_info, status = status, launch = launch, id = id) @app.route("/tower", methods=['POST','GET']) def tower(): launch = False if request.method == 'POST': keyword = request.form['launchjob'] logger.info("Test | Keyword var => " + keyword) template_id = request.form['template_id'] job_info = launch_job(template_id, keyword) launch = True return render_template('tower.html', job_info = job_info, launch = launch) else: return render_template('tower.html')mi script js:
function refresh() { $.ajax({ url: '/tower/' + id, dataType: 'json', id: { id : job_info.job_id }, success: function(data) { $('#statustable').html(data); } }); setTimeout(refresh, 10000); console.log('refresh') }; $(function(){ refresh(); });y mi archivo html
<th scope="row"></th> <td> {{ job_info.job_id }}</td> <td><p class="text-warning" id="statustable">{{ job_info.job_status }}</p></td> <td><a href="{{ job_info.url }}" target="_blank">Lien vers le stdout</a></td>Cuando actualizo manualmente, funciona, el estado del trabajo cambia, pero no se actualiza automáticamente. Podrías ayudar ?
Gracias
David
JavaScript no puede ver las variables de su servidor. job_info.job_id no se definirá en su navegador.
Debe transportar el valor de la variable al navegador de alguna manera si desea usarlo allí.
<td>{{ job_info.job_id }}</td> .Si cambia su vista así en el lado del servidor:
<tr data-job-id="{{job_info.job_id|tojson|forceescape}}"> <th scope="row"></th> <td>{{ job_info.job_id }}</td> <td><p class="text-warning" id="statustable">{{ job_info.job_status }}</p></td> <td><a href="{{ job_info.url }}" target="_blank">Lien vers le stdout</a></td> </tr> Luego puede acceder al valor de data-job-id="..." con jQuery en el lado del cliente:
function refresh() { const id = $('#statustable').closest("tr").data('job-id'); $('#statustable').load('/tower/' + id); setTimeout(refresh, 10000); }; $(refresh);tojson de Jinja , los atributos de datos le permiten transportar datos complejos como la estructura job_info completa a su cliente, no solo valores simples como una sola ID. Advertencia: recuerda usar el filtro forceescape para evitar problemas .data-job-id="..." a un elemento en su HTML donde tenga más sentido.$(element).load(url) es la forma abreviada de $.ajax(url) -> success -> $(element).html(response) . Consulte https://api.jquery.com/load/ .$(refresh) es la forma abreviada de $(function () { refresh(); }) . Consulte https://api.jquery.com/jquery/#jQuery3 .