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  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

CodePudding user response：

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.

• One way would be to read the text from the <td>{{ job_info.job_id }}</td>.
• A nicer way would be to use an HTML data attribute.

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  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);

• Together with Jinja's 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.
• Move 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.