CODEWITHSUNDEEP
javascriptjquerypythonajaxflask
pride
pride

Reputation: 59

Update a variable dynamically in flask

I m working with flask and need to make a python variable appear on a HTML page & update it in real time without the need to refresh . i have searched but couldn't do it. To find a solution the simple way i have created in the python script a time variable that should be updated in the page dynamically.Here is my code:

<script>
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    (function(){
        $.getJSON(
            $SCRIPT_ROOT+"/get_data",
            function(data) {
               $("#testt").text(data.time);
            }
        setInterval(arguments.callee, 1000);
        );
    });
</script>
<span id="testt">?</span>

import datetime
from flask.app import Flask
from flask.json import jsonify

app=Flask(__name__)

@app.route('/get_data', methods=['GET'])
def get_data():
    return jsonify(time=str(datetime.datetime.now().time()))
if __name__=="__main__":
    app.run(debug = True, host='0.0.0.0')

EDIT: In my solution the time only updates when i refresh the page . want it to update in real time.

Upvotes: 1

Views: 9170

Answers (2)

bruno desthuilliers
bruno desthuilliers

Reputation: 77892

You don't specify what's your problem exactly ("doesn't work" doesn't really help) so this can be a wild-guess answer at best.

First point, you define an anonymous function but never call it, so the chances it ever gets executed are strictly equal to zero. If you want that function to be executed when your dom's ready (which is the sane thing to do since it references an element of the dom that is defined after the function, you can use $(document).ready(yourfunc), ie:

$(document).ready(function(){
    $.getJSON(
        $SCRIPT_ROOT+"/get_data",
        function(data) {
           $("#testt").text(data.time);
        }
    setInterval(arguments.callee, 1000);
    );
});

Also you certainly don't want to call window.setInterval() from the function that itself (which would then be called again an again each time the function is called), so it should rather be something like:

$(document).ready(function(){
    function _update_time() { 
        $.getJSON(
            $SCRIPT_ROOT+"/get_data",
            function(data) {
               $("#testt").text(data.time);
            });
    }
    // do a first call at load time
    _update_time();
    // then repeat it every second
    window.setInterval(_update_time, 1000);
    );
});

Also, I'm not a Jinja2 expert (since it's Flask and from the look of it I assume Jinja2 templating), but this:

$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

seems uncorrect to me.

First, you want $SCRIPT_ROOT to be a string, so you have to quote it:

$SCRIPT_ROOT = "{{ request.script_root|tojson|safe }}";

Then I don't see the point of the tojson and safe filters here - safe tells the template engine to not html-escape your variable but an url seldom contains html markup, and jsonifying a simple string doesn't make sense to me.

Once again it's wild-guess at best and possibly completely wrong. If you want better answers you will have to do your homework and post some more informations, including:

  • the rendered html (well the relevant part that is)
  • any error message in your browser's inspector window / debug toolbar / however it's called in your browser.

Upvotes: 1

Alex Lucaci
Alex Lucaci

Reputation: 630

You can update your page dinamically using a websocket. There is a project named Socket.Io which is implemented by Flask to work with websockets.

You can read the documentation here : https://flask-socketio.readthedocs.io/en/latest/ and watch a quick example to understand the concepts here : https://www.youtube.com/watch?v=RdSrkkrj3l4

Upvotes: 0

Related Questions