0

Using a logfile that is produced by a long computation and refresh it into a pre tag.

Scripted with a JS function (not inline) that can be toggled on or off, instead of always on.

I have tried to adapt solution from the accepted answer here Display the contents of a log file as it is updated into function and it does not work as expected because it does not render.

Log File is changed by another software accordingly.

Flasks Python

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html',
                            str_log = url_for('static',log.txt"))

@app.route('/', methods=['POST'])
def all_forms_post():
    if request.method == 'POST':
        if request.form['id_form'] == 'I.2':
            #do code that changes log.txt
            index
            return redirect(request.url)
    return redirect(request.url)

HTML

<form method="post" action="/" enctype="multipart/form-data">
    <input type="hidden" name="id_form" value="I.2" />
    <input type="submit" name="btn" value="simulate" onclick="refreshPre('{{ str_log }}', true)" />
</form>
<pre id="contents"> 
    Hello click button to start simulation and update this
</pre>

JS

// global JavaScript Variables here
var timerId;

/*Fetches*/
function refreshPre(url, blRefresh = true) {
    if (blRefresh) {
        // declare and assign setInterval
        timerId = window.setInterval(populatePre(url),1000);
    } else {
        // stop setInterval
        window.clearInterval(timerId);
        timerId = null;
    }
}

function populatePre(url) {
    var output = document.getElementById('contents');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
}

Ideas are very appreciated cheers.

Kostas Minaidis
  • 4,681
  • 3
  • 17
  • 25
Francisco Costa
  • 111
  • 9

1 Answers1

0

You need to rewrite the setInterval callback function and add an xhr.onload callback like this:

//global JavaScript Variables here
var timerId;

/*Fetches*/
function refreshPre(url, blRefresh = true) {
    if (blRefresh) {
        //declare and assign setInterval
        timerId = window.setInterval(function(){ populatePre(url) },1000);
    } else {
        //stop setInterval
        window.clearInterval(timerId);
        timerId = null; 
    }
}

function populatePre(url) {
    var output = document.getElementById('contents');
    var xhr = new XMLHttpRequest();
    // Listen to xhr events for response:
    xhr.onload = function(){
        output.innerText = xhr.response;
    }    
    xhr.open('GET', url);
    xhr.send();
}

XMLHttpRequest Reference

Kostas Minaidis
  • 4,681
  • 3
  • 17
  • 25
  • Have tested and it is running without errors, the issue now is that i)only displays log when simulation is complete accordingly, and ii) when redirecting it refreshes page and takes it back to original contents welcome. – Francisco Costa Oct 06 '19 at 00:35
  • 1) You need to handle errors using the xhr.onerror event handler. 2) You need to prevent the default action of the submit input element which is to load the URL in the action form attribute. Take a look at how you can do this from this post: https://stackoverflow.com/questions/7056669/how-to-prevent-default-event-handling-in-an-onclick-method/7056673 – Kostas Minaidis Oct 06 '19 at 01:00
  • By the way, Is the JS script inline in the HTML? – Kostas Minaidis Oct 06 '19 at 01:02
  • Nope the idea was to make it in scripts.js. If i use the javascript after the pre tag is what the answer in the link already does, inline, it solves problem ii) although it is not the goal. – Francisco Costa Oct 06 '19 at 01:04
  • If no further code is suggestion i will do it with inline code, for demonstration although it does not update it works . Although thank you very much. – Francisco Costa Oct 06 '19 at 01:08