0

I want to create a real-time log for my website. A PHP script gets the content from data/log.txt and echoes it. Then the same process gets repeated every second via JavaScript.

I use this code to test it but have a few problems:

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            window.onload = startInterval();
            function startInterval()
            {
                setInterval("loadLog();",1000);
            }
            function loadLog()
            {                 
                document.getElementById('log').innerHTML = "<?php                                                                
                    $datei=fopen("data/log.txt","r");
                    while(!feof($datei))
                    {
                        $zeile = fgets($datei,1000);
                        echo $zeile."<br>";
                    }
                    fclose($datei);                                                         
                ?>";
            }
        </script>
    </head>
    <body>  
        Javascript refresh:<br>
        <div id="log"></div>
    </body>
</html>

Testing PHP seperatly:<br>

<?php                                                                
    $datei=fopen("data/log.txt","r");
    while(!feof($datei))
    {
        $zeile = fgets($datei,1000);
        echo $zeile."<br>";
    }
    fclose($datei);                                                         
?>

The PHP snippet by itself works great. But I can't seem to get the JavaScript part to work...

Problem 1: When I change the content of log.txt the JavaScript part does not refresh itself as I would expect. I'm a beginner with JavaScript so I might have made some obvious mistakes or have a wrong idea how I should do it.

Problem 2:

As long as log.txt consist of only one line the output works:

Javascript refresh: test1

Testing PHP separately: test1

But as soon as I add an even empty line the JavaScript part doesn't load anything.

Community
  • 1
  • 1
Szeperator
  • 21
  • 6
  • 2
    You need AJAX here! – J. Langer Feb 19 '19 at 17:07
  • This link might help you. https://gomakethings.com/ajax-and-apis-with-vanilla-javascript/ – J. Langer Feb 19 '19 at 17:09
  • 1
    Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – ADyson Feb 19 '19 at 17:10
  • How do I do that? Because adding this line: doesnt change anything? – Szeperator Feb 19 '19 at 17:11
  • the PHP does not re-execute every time you run your JS. the PHP has already executed on the server, it runs once to build your page, and then the _result_ of the PHP is embedded into your page as static data. JavaScript runs in the browser once the page has loaded. It's a totally separate execution environment. You can't just mingle them together and expect it to work. If you do a "View Source" in your browser on your page you'll see that everything after `document.getElementById('log').innerHTML = "` is hard-coded - the result of the script than ran on your server to create your web page. – ADyson Feb 19 '19 at 17:11
  • What do you need to do instead is make your JavaScript code run an _AJAX request_ to the server so that it can execute some PHP in response to that request, and return you some new data in the response. If you don't know how to use AJAX, find some tutorials and examples and documentation to explain the basic principles. Then try it out for yourself. – ADyson Feb 19 '19 at 17:13
  • `adding this line: – ADyson Feb 19 '19 at 17:16

1 Answers1

1

With the help of the comments on my initial question I came up with the following code wich works great:

<html>
    <head>
        <title></title>
        <script src="resources/javascript/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            setInterval(function(){
            $('#log').load('loadlog.php');
            }, 2000) /* time in milliseconds (ie 2 seconds)*/
        </script>
    </head>
    <body>  
        Javascript refresh:<br>
        <div id="log"></div>
    </body>
</html>

Testing PHP seperatly:<br>

<?php                                                                
    $datei=fopen("data/log.txt","r");
    while(!feof($datei))
    {
        $zeile = fgets($datei,1000);
        echo $zeile."<br>";
    }
    fclose($datei);                                                         
?>
Szeperator
  • 21
  • 6