I am new in javascript, I have created a flask site and I would like to follow ansible tower job. I have create a specific route :
@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')
my js script:
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();
});
and my html file
<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>
When I refresh manually it works the job status changes, but no auto refresh. Could you help ?
Thanks
David
JavaScript can't see your server's variables. job_info.job_id will not be defined in your browser.
You need to transport the variable value to the browser somehow if you want to use it there.
<td>{{ job_info.job_id }}</td>.If you change your view like this on the server side:
<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>
Then you can access the value from data-job-id="..." with jQuery on the client side:
function refresh() {
const id = $('#statustable').closest("tr").data('job-id');
$('#statustable').load('/tower/' + id);
setTimeout(refresh, 10000);
};
$(refresh);
tojson filter, data attributes allow you to transport complex data like the complete job_info structure to your client, not just simple values like a single ID. Caveat: Remember to use the forceescape filter to avoid issues.data-job-id="..." to an element in your HTML where it makes the most sense.$(element).load(url) is the short form of $.ajax(url) -> success -> $(element).html(response). See https://api.jquery.com/load/.$(refresh) is the short form of $(function () { refresh(); }). See https://api.jquery.com/jquery/#jQuery3.