Javascript get file contents loop

Question

I have been trying to get a function to reload every second.

I can do this with php get file contents (and meta page reload) but I am also using JS to display time and its not instant at loading so it has a flashing effect.

I have tried this with JS but it is showing nothing.

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vivarium Enviroment Control Centre</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    function updateTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        if (seconds < 10){
            seconds = "0" + seconds;
        }
        var v = hours + ":" + minutes + ":" + seconds + " ";
        if(hours > 11){
            v+="PM";
        } else {
            v+="AM"
        }
        setTimeout("updateTime()",1000);
        document.getElementById('time').innerHTML=v;
    }
updateTime();

$("document").ready(function(){
    setInterval(function(){
        $("#wifi").load('wifiout.php');
    },1000);
});


function changeStatus() {
    var image = document.getElementById('lightStatus');
    if (image.src.match("lightoff")) {
        image.src = "lighton.png";
    } else {
        image.src = "lightoff.png";
    }
}
</script>
</head>
<body>
<div id="topbar">
    <span id="time"></span>
    <div id="wifi"></div>
    <img id="lightStatus" class="right" onclick="changeStatus()" src="lightoff.png" width="32" height="32">
</div>
</body>
</html>

This is something I've never done before so it is very possible. — Sauced Apples
– Sauced Apples, Commented Apr 3, 2016 at 21:46

Zakaria Acharki · Accepted Answer · 2016-04-03 22:19:28Z

1

Working fiddle

You're missing jQuery plugin declaration, add the following line before your script tag :

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

NOTE : call the updateTime() function inside ready function or you will get the following error :

TypeError: Cannot set property 'innerHTML' of null

Because you're trying to use span time when the page not fully loaded yet.

Hope this will helps.

edited Apr 3, 2016 at 22:19

answered Apr 3, 2016 at 21:54

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sauced Apples Over a year ago

Q updated to reflect change made. The file wifiout.php only contains an image tag, and its not being displayed on the page.

Zakaria Acharki Over a year ago

Working example here acharki.byethost31.com/test.html, check my update the problem was in updateTime() call.

Collectives™ on Stack Overflow

Javascript get file contents loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related