CODEWITHSUNDEEP
javascriptjqueryhtml
Kelly o'Brian
Kelly o'Brian

Reputation: 445

Dynamically update webpage with file content

I need a simple solution to dynamically display on a webpage the content of a changing file (output of some computation). I came up with the following which seems to be a viable solution (for sure there are better ones). Unfortunately I do not achieve the expected result, as the content of output.txt is not loaded. Probably I am missing something quite basic.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
body {
    font-family: monospace;
}
#target {
    border: 1px solid gray;
    min-height: 20em;
}
</style>

<h2>Yep</h2>

<textarea id="target" cols="60" rows="10">Loading...</textarea>

<script>
var checkInterval = 1; //seconds
var fileServer = "output.txt";
var lastData;

function checkFile() {
    $.get(fileServer, function (data) {
        // Update the text if it has changed
        if (lastData !== data) {
            $( "#target" ).val( data );
            $( "#target" ).animate({
                scrollTop: $( "#target" )[0].scrollHeight - $( "#target" ).height()
            }, 'slow');
            lastData = data;
        }
    });
}

$(document).ready(function () {
    setInterval(checkFile, 1000 * checkInterval);
});

</script> 
</body>
</html>

Upvotes: 0

Views: 2463

Answers (1)

Bathri Nathan
Bathri Nathan

Reputation: 1267

This code might help you to fetch the file dynamically.

function read(){
    jQuery.get('now.txt',function(data){document.write(data);});
}

If you want it to refresh every 3 seconds use setInterval

Documentation:

http://www.w3schools.com/js/js_timing.asp

Upvotes: 1

Related Questions