CODEWITHSUNDEEP
javascriptflaskjinja2
neela
neela

Reputation: 89

Flask app with jinja rendering; Does not auto refresh webpage

I have a Flask app that queries a database, and renders a table using the retrieved data using a jinja template. I would like the web page to continue refreshing periodically after the first click so that if the data in the database changes, the webpage displays the new data.

I have tried many things that other people have suggested on the net, but nothing seems to work. Here is a sample of what I tried:

1) Placing the following code in the jinja template file:

<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="refresh" content="5">
</head>

2) Placing the following code in the jinja template file:

<head>
<script type="text/JavaScript">
function TimedRefresh( t ) {
setTimeout("location.reload(true);", t);
}
</script>
</head>

<body onload="JavaScript:TimedRefresh(2000);">
<p>Auto Refreshing Every 30 Seconds.</p>
</body>

3) placing the following code in the jinja template file:

<head>
<script TYPE="text/javascript">
var datetime = null,
    date = null;

var update = function () {
    date = moment(new Date())
    datetime.html(date.format('dddd, MMMM Do YYYY, h:mm:ss a'));
};

$(document).ready(function(){
    datetime = $('#datetime')
    update();
    setInterval(update, 1000);
});
</script>
</head>

..and

<div id="datetime"></div>

etc..

Nothing worked. The page is dead as a door knob -- loads the first time, but does not auto-refresh unless I press a button. I am really puzzled. Would appreciate any help. Any kind of refreshing is fine -- does not need to be in sections. Please help.

Thank you, neela.

Upvotes: 2

Views: 2706

Answers (1)

oxalorg
oxalorg

Reputation: 2798

Copy paste the code below {% block page_content %} line and above <style> line in your template file:

<script type="text/javascript">
var timer = function() {
    setTimeout(function(){ window.location.reload(); }, 1500);
};
timer();
</script>

This is how your file should look: http://pastebin.com/G5tFxeA2

Note: This way to refresh table data is an extremely bad technique. You most likely want to query the table data using an API and redraw all the fields.

Upvotes: 2

Related Questions