CODEWITHSUNDEEP
javascriptphpjqueryhtml
Sauced Apples
Sauced Apples

Reputation: 1173

Javascript get file contents loop

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>

Upvotes: 1

Views: 198

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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.

Upvotes: 1

Related Questions