Question

I am in the process of creating an intranet site that accesses test data from a database and displays the results back onto a generic HTML webpage.

Right now I have Python setup as cgi and am getting the desired results I need for now. But now there is a request to display some information real-time.

I am new into the world of web programming this way but what is the best way to run a Python script and display the information on the HTML page without reloading.

I know how to get the information on the Python server side and display the information correctly in the HTML side but what I am missing is how I am able to link the two together or call the Python method from the HTML side.

Any suggestions or simple examples would be great.

Thanks

Answer 1

If you want to reload the whole page, then just add a meta refresh tag to the HTML in the HEAD section:

<meta http-equiv="refresh" content="20" />

and the page will be reloaded every 20 seconds.

If you want to populate an element of the page at regular intervals, and you do not much care for its looks (or can take the time to tweak the subpage’s looks), you can use an IFRAME displaying a sub-page via a second CGI, with a meta refresh in its HTML:

<iframe class="realtime-data" src="/cgi-bin/realtime.py"></iframe>

Other more flexible cases would also require you to supply a second CGI that would publish the realtime data when called, and poll that CGI from the main page using e.g. jQuery’s load() method:

setInterval(function() {
    $('#div_where_html_goes').load('/cgi-bin/realtime.py')
}, 20000); // 20k milliseconds

The above is just a hint, not a good programming practice:

• there is no provision for loading errors
• there is no provision for delays and script pile-up
• the CGI has to supply not only the data but probably also some layout

…but it should be enough to get you started. Basically, you install jQuery (one line of HTML code if loading from Google), and you supply the init code at the end of the page. There you put the Javascript code:

<script type="text/javascript">
// <![CDATA[ <!--
    (function($){
        $(function(){

            setInterval(function() {
                $('#div_where_html_goes').load('/cgi-bin/realtime.py')
            }, 20000); // 20k milliseconds

        })
    })(jQuery);
// --> ]]>
</script>
</body>