Page getting stuck on updating image

I have a problem with my web page which stops updating my image automatically. The page consists of a key pad. When a 4 digit code is entered the code is sent to alarm.php by ajax script. Alarm.php updated a Db and returns some values for alarmSet and alarm Triggered (0,0 alarm off, 1,0 alarm set, 1,1 alarm triggered). My index page then displays an icon depending on the returned values to show the state of the alarm. The page also has an auto update to check to Db and update the icons if the alarm state changes. All this works great. The console is showing the returned values and the image that is to be displayed and the page response as expected. But if I leave the page for about 5 min the images stop updating. I can still enter a code, the Db is still updated and the console is still showing returned value eg 0,0 greenAlarm.jpg but the green icon is not displayed. It seems the page has locked on the display side. If I refresh the page all is ok again. I cant see what is causing this. Hope this make sense.

index JS script below which is in the Header part of the page
<script> // this script will get the data from alarm.php
var count = 0;
setInterval(function (){
$.ajax({
type: "GET",
url:"alarm.php",
data:"json",
success: function(data){
myObj = JSON.parse(data); // pass the data returned to array myObject
console.log(myObj)
display(myObj);// send the data outside this function to be worked with
}
});
}, 1000);
//below function is needed to change a img depending on returned data from DB
function display(Jsonreturn){
function image(thisImg){ // get image from if statements via return statement
document.getElementById("image").src = thisImg;
console.log(thisImg);
}
if (Jsonreturn[0] == 0){
image("greenAlarm.jpg"); // alarm off
count = 0;
}
if (Jsonreturn[0] == 1 && Jsonreturn[1] == 0 && count < 2 || count > 3){
image("blueAlarm.jpg"); // alarm set
count = 0;
}
count = count + 1;
console.log(count);
// alarm triggered alternate between two images
if (Jsonreturn[0] == 1 && Jsonreturn[1] == 1 && count == 2){
image("alarmTrig1.jpg");
}
if (Jsonreturn[0] == 1 && Jsonreturn[1] == 1 && count == 3){
count = 1;
image("alarmTrig2.jpg");
}
}

</script>
<script type="text/javascript">
function addCode(key){
var code = document.forms[0].code;
if(code.value.length < 4){
code.value = code.value + key;
}
if(code.value.length == 4){
document.getElementById("message").style.display = "block";
setTimeout(alarm, 1000, code.value);
}
}
function alarm(code){
$.ajax({
method: "POST",
url: "alarm.php",
data: {code: code},
cache: false,
success: function(responseText) {
console.log(responseText) // show returned text in console
}
})
emptyCode();
document.getElementById("message").style.display = "none";
}
function submitForm(){
document.forms[0].submit();
}

function emptyCode(){
document.forms[0].code.value = "";
}
</script>

Any help would be great thank you

 

The session is timing out - and there's nothing you can do about that except set a longer session time (which is dangerous). Remember, the web is a disconnected model - the browser connects, gets the page and disconnects. Five minutes later, the server has forgotten" that the browser connected to it. You could set cookies with a longer timeout (which is still a bit dangerous) - if the cookie exists and the time since last communication is more than 5 minutes (the browser will have to keep a timer running), send the cookie with the sessionID. Or send a "keep-alive" every 4 minutes of non-use. (And reset the timer both at keep-alive and when any communications is done.)