Flask+AJAX+Jquery+JINJA to dynamically update HTML Table

Question

I want to display the Port status dynamically. I don\'t want to reload the page to see a new value. I know how to get the Port status in Python(using uiApi()).

Answer 1

You will need two things : A route for an AJAX request that will return your data formatted as JSON (should be quite easy to do with Flask's jsonify function).

Once you have that route setup, you need to call it using an AJAX call. Using jQuery it feels painless (but you can do it with vanilla JS too).

<script>
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    (function(){
        $.getJSON(
            $SCRIPT_ROOT+"/_stuff", // Your AJAX route here
            function(data) {
                // Update the value in your table here
            }
        );
        setTimeout(arguments.callee, 10000);
    })();
</script>

In the snippet above you will need to specify the path of your AJAX route, and do things with the data value. For a quick test you can simply console.log(data) and check if the returned data are good.

Note that the above snippets uses an anonymous function, and will fetch your data every 10 seconds (10000 ms).

I hope that will help

Documentation :
Ajax with Flask
jQuery.getJSON