How to refresh a div every X seconds which reads data from file?

Question

I need to refresh a div every few seconds on my below index.php page.

<?php

session_start();

if (! check_write()) {
    redirect('testlogin.php');
    return;
}

if (file_exists('lmt.json')) {
    $lmt = json_decode(file_get_contents("lmt.json"), true);
}

?>
<!doctype html>
<html lang="en">

<head>
    <title>Home</title>
</head>

<body>
    <div>
        <h1>Website Title</h1> <a href="logout.php">Logout</a> </div>
    <div>
        <p>Welcome back,
            <?= $_SESSION['user_id'] ?>!</p>
    </div>
    <!-- How can I refresh below div every x seconds? -->
    <div>
        <?php if (isset($lmt)) { ?>
            <p>Last modified by <?= $lmt['fname']; ?> at <?= $lmt['ts']; ?></p>
        <?php } ?>
    </div>
    <form method="post">
        <input type="text" name="field1" />
        <input type="text" name="field2" />
        <input type="submit" name="submit" value="Save Data"> </form>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    $(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            $.post({
                url: 'save.php',
                data: $(this).serialize(),
            }).done(response => {
                response = JSON.parse(response);
                if(response.message) {
                    alert(response.message);
                }
            });
        });
    });
    </script>
</body>
</html>

Below is the div I want to refresh every X seconds. As of now it just gets the value from $lmt variable and show it to the user but I want to refresh that div every X seconds by reading from lmt.json file and then show fname and ts variable.

<!-- How can I refresh below div every x seconds? -->
<div>
    <?php if (isset($lmt)) { ?>
        <p>Last modified by <?= $lmt['fname']; ?> at <?= $lmt['ts']; ?></p>
    <?php } ?>
</div>

How can I do this efficiently?

Does this answer your question? [AJAX jQuery refresh div every 5 seconds](https://stackoverflow.com/questions/25446628/ajax-jquery-refresh-div-every-5-seconds) — ficuscr, Sep 29 '20 at 02:10
I saw the link but my confusion is OP is calling `test.php` every 5 seconds in his div. In my cases I want to read file every X seconds in the div so that's where I am confuse. I noticed an answer where we are doing like this `$('#links').load('test.php',function () {`. And thats where i am confuse seeing `test.php` since in my case I need to read file every X seconds. — David Todd, Sep 29 '20 at 02:20

score 1 · Accepted Answer · answered Sep 29 '20 at 04:18

Write two seperate files index.php (It contains the div that you want to refresh) and filehandle.php(file contents that you should recieve).

index.php

<?php

session_start();

if (! check_write()) {
    redirect('testlogin.php');
    return;
}

?>
<!doctype html>
<html lang="en">

<head>
    <title>Home</title>
</head>

<body>
    <div>
        <h1>Website Title</h1> <a href="logout.php">Logout</a> </div>
    <div>
        <p>Welcome back,
            <?= $_SESSION['user_id'] ?>!</p>
    </div>
    <!-- How can I refresh below div every x seconds? -->
    <div class="update_content"></div>

    <form method="post">
        <input type="text" name="field1" />
        <input type="text" name="field2" />
        <input type="submit" name="submit" value="Save Data"> </form>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>

    var update_time = 1000;
    $.get('filehandle.php', function (data, status){
        $('.update_content').html(data);
    });
    setInterval(function(){
        $.get('filehandle.php', function (data, status){
            $('.update_content').html(data);
        });
    }, update_time);

    $(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            $.post({
                url: 'save.php',
                data: $(this).serialize(),
            }).done(response => {
                response = JSON.parse(response);
                if(response.message) {
                    alert(response.message);
                }
            });
        });
    });
    </script>
</body>
</html>

filehandle.php

<?php

if (file_exists('lmt.json')) {
    $lmt = json_decode(file_get_contents("lmt.json"), true);
}

if (isset($lmt)) {
    echo "<p>Last modified by ".$lmt['fname']." at ".$lmt['ts']."</p>";
}

?>

change the value of update_time value in index.php to your desired value (it refers to update every update_time seconds).

Note: update_time = 1000 -> 1sec, 2000 -> 2sec, ...

score 0 · Answer 2 · answered Sep 29 '20 at 03:32

If you're just looking for a quick way to get this done and over with I would implore you to check on w3schools.com. Here's an interesting look into what you might want from your site. It's an insight on the setTimeout() and setInterval() function from vanilla JS. Happy coding!

JS Timing

How to refresh a div every X seconds which reads data from file?

2 Answers2