CODEWITHSUNDEEP
javascripttextareaauto-update
Giovanni Gibertoni
Giovanni Gibertoni

Reputation: 23

Auto-update text area from txt file

I've tried many solutions posted online but no one can solve my problem. I have a php page with some basic element. In particular I want to realize a text area (read only) that display the text of a txt file. I want it to "auto update" the text every 1 second or less without pressing any button or reloading the page...this is what I have now:

<html>
    <head>
        <title>Yun_TempServer_Home</title>

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            function getFileContents() {
                var client = new XMLHttpRequest();
                client.open('GET', '/sd/status.txt');
                client.onreadystatechange = function () {
                    document.querySelector("textarea").value = client.responseText;
                }
                client.send();
            }
            setInterval(getFileContents, 1000);

        </script>
    </head>
    <body>

        <textarea  id="textarea"rows="15" cols="50" readonly>
        </textarea>

    </body>
</html>

For now it works but sometimes it reads only one part of the new text, other times it will not update the code for 30-40 seconds. I'm at a very basic level for both php, html and javascript, so please explain well how can I solve this..

Thanks

Upvotes: 0

Views: 3289

Answers (1)

Giovanni Gibertoni
Giovanni Gibertoni

Reputation: 23

Finally I've got the answer and this seems to work just fine! I've found this post: How to read a local text file? in particular I used the answer:

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

and since I don't want the alert() I just modified it a little. This is my code now:

<script>
    function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "/sd/status.txt", false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                 document.querySelector("textarea").value = allText;
            }
        }
    }
    rawFile.send(null);
}
    setInterval(readTextFile, 1000);

</script>

With setInterval(readTextFile, 1000); it execute the reading each second. If anyone want to suggest some variations i'm waiting for it!

Update 10/04: I replaced the XMLHttpRequest() with AJAX code. Here's the result that work perfectly:

<script>
    function readTextFile(file)
{
    var x = document.getElementById("autoScroll").checked; //if autoscrool is checked
    if(x==true){
     document.getElementById("textarea").scrollTop = document.getElementById("textarea").scrollHeight; //autoscroll
    }

    var filePath = "http://192.168.1.50/sd/status.txt"

    $.ajax({
    dataType: "text",
    success : function (data) {
            $("#textarea").load(filePath);
            }
    });

}
setInterval(readTextFile, 1000);

</script>

And here the html part:

<html>
<textarea  id="textarea" rows="15" cols="50" readonly autocomplete="off">

</textarea>

<br>
<form>
<input id="clear" type="button" value="Clear">
<label><input type="checkbox" value="AutoScroll" id="autoScroll" label="Auto Scroll"checked>    Auto-Scroll</label>
</form>
</html>

I added the Auto-Scroll checkbox to activate or deactivate autoscroll of textarea.

Upvotes: 1

Related Questions