setInterval(updateAircoState, 5000); does not fire updateAircoState() [closed]

I'm trying to build a webserver on an ESP8266 using jQuery and bootstrap. This is my first go at jQuery and bootstrap (and Javascript for that matter).
This project is inspired by this blog: "https://github.com/projetsdiy/ESP8266-Webserver-Tutorials".

======Update============

What I have found out after lots of Trail&Error is that I don't know how to start an interval-timer after the document is fully loaded.

Also found out that setInterval(<function>, <time>) need to be assigned to a var like

setInterval(<function>, <time>)

var Timer_updateAirco = setInterval(updateAircoState, 5000);

var Timer_updateAirco = setInterval(updateAircoState, 5000);

And clearing the timer is like clearInterval(Timer_updateAirco);

clearInterval(Timer_updateAirco);

What I need to know is how to start an interval timer, executing a function, after the full load of the document.

All help is appreciated!

==================

The site uses 3 "pane's" and if you hit one pane (? still not sure how these things are called) that pane becomes 'active', and than a setTimeout() is called to update the content of that pane periodically. The problem I have is, that after the first load of the document the first pane (tab_airco) is active,

<ul class="nav nav-tabs" id="tab">
<li class="active"><a href="#tab_airco" data-toggle="tab">AircoControl</a></li>
<li><a href="#tab_graphs" data-toggle="tab">Grafieken</a></li>
<li><a href="#tab_actueel" data-toggle="tab">Actueel</a></li>
</ul>


but not triggered by the

tab_pane = $(e.target).attr("href")


... call, so the

Timer_UpdateAirco = setTimeout(function(){});


is not executed and the pane does not update. Thats where I thought I need a setInterval(). But, although, this part of the code:

// auto-update airco
updateAircoState();
alert("setInterval(updateAircoState, 5000)");
setInterval(updateAircoState, 5000); //60000 MS == 1 minutes


.. is executed (I do get the alert() message), the updateAircoState() function is never executed..

If I make an other pane active and than make the tab_airco pane active again, the setTimeout() function kicks in and the content of the pane is updated every ten seconds...

I have this code (snipped):

//---- Global var's ----
var tab_pane;
// Force aircoState first launch
var Timer_UpdateAirco;
var firstAirco = true;
// Force chart update first launch
var Timer_UpdateGraphs;
var firstGraphs = true;
// Force actueel update first launch
var Timer_UpdateAct;
var firstAct = true;


$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// remove all the timers when we change tabs
clearTimeout(Timer_UpdateAirco);
clearTimeout(Timer_UpdateAct);
clearTimeout(Timer_UpdateGraphs);
tab_pane = $(e.target).attr("href")
console.log('activated ' + tab_pane );

// IE10, Firefox, Chrome, etc.
if (history.pushState)
window.history.pushState(null, null, tab_pane);
else
window.location.hash = tab_pane;

if (tab_pane=='#tab_actueel') {
$('#table_actueel').bootstrapTable('refresh',{silent:true, url:'/tab_actueel.json'});
}
});

// auto-update airco
updateAircoState();
console.log("setInterval(updateAircoState, 5000)");
setInterval(updateAircoState, 5000); //60000 MS == 1 minutes

// Create a timer than update aircoState every n secondes
$('#tab_airco').on('load-success.bs.table', function (e,data){
console.log("tab_airco loaded");
if ($('.nav-tabs .active > a').attr('href')=='#tab_airco') {
Timer_UpdateAirco = setTimeout(function(){
$('#aircoState').bootstrapTable('refresh',{silent: true, showLoading: false, url: '/getAirco.json'});
$('#aircoTemp').bootstrapTable('refresh',{silent: true, showLoading: false, url: '/getAirco.json'});
updateAircoState();
},10000);
}
});

function updateAircoState(){
// only if airco panel is active
if (tab_pane=='#tab_airco' | firstAirco ){
if (firstAirco) {
console.log("updateAircoState() for the first time");
}
firstAirco = false;
$.getJSON('/getAirco.json', function(data){
console.log("updateAircoState : " + JSON.stringify(data) + "|" + data.status);
var id_AircoStatus = "#AircoStatus";
if ( data.status === "1" ) {
$(id_AircoStatus).html("COOL");
} else if ( data.status === "2" ) {
$(id_AircoStatus).html("HEAT");
} else {
$(id_AircoStatus).html("OFF");
}
$('#AircoStatus').html(data.aircoState);
$('#aircoTemp').html(data.aircoTemp);
}).fail(function(err){
console.log("err getJSON getAirco.json "+JSON.stringify(err));
});
}
};


As far as I understand Javascript all used var's and functions are globaly declared.

I have also tried this code snipped instead of the "auto-update Airco" part:

$(document).ready(function(){
console.log("document.ready() and loaded..");
Timer_UpdateAirco = setTimeout(function(){
$('#aircoState').bootstrapTable('refresh',{silent: true, showLoading: false, url: '/getAirco.json'});
$('#aircoTemp').bootstrapTable('refresh',{silent: true, showLoading: false, url: '/getAirco.json'});
updateAircoState();
},5000);

});


.. but although the message "document.ready() and loaded.." shows in the console, there is no update of the function..

So, my questions are:

This is the output on the Javascript console:

updateAircoState() for the first time
14:01:07.308 (index):235 setInterval(updateAircoState, 5000)
14:01:07.308 (index):297 updateActueel() for the first time
14:01:07.347 (index):359 document.ready() and loaded..
14:01:07.420 (index):308 tab_temp : {"t":"25.96"}|25.96
14:01:07.485 (index):261 updateAircoState :
{"status":"0","aircoTemp":"25.96","success":"1"}|0
14:01:07.574 VM1343:3 XHR Loaded (getAirco.json - 0 - )
14:01:07.583 VM1348:3 XHR Loaded (tab_temp.json - 200 OK - )
14:01:07.587 VM1352:3 XHR Loaded (getAirco.json - 200 OK - )
14:01:07.610 (index):168 updateGraphs() for the first time
14:01:07.861 VM1371:3 XHR Loaded (graph_temp.json - 200 OK - 152.80739898515495ms - 5.23KB)
14:01:22.109 (index):111 activated #tab_graphs
14:02:07.942 VM1377:3 XHR Loaded (graph_temp.json - 200 OK - )
14:02:15.104 (index):111 activated #tab_airco
14:02:17.439 (index):261 updateAircoState :
{"status":"0","aircoTemp":"26.04","success":"1"}|0
14:02:17.455 VM1381:3 XHR Loaded (getAirco.json - 200 OK - 127.97058605531417ms - 131B)
14:02:22.354 (index):261 updateAircoState :
{"status":"0","aircoTemp":"26.04","success":"1"}|0
14:02:22.368 VM1385:3 XHR Loaded (getAirco.json - 200 OK - 40.801520015588025ms - 131B)
14:02:27.814 (index):261 updateAircoState :
{"status":"0","aircoTemp":"26.02","success":"1"}|0
14:02:27.819 VM1389:3 XHR Loaded (getAirco.json - 200 OK - 501.2593939119ms - 131B)


At 14:01:22 the tab_graph pane is selected. After that at 14:02:15 the tab_airco is selected again and than the updateAircoState() is executed every 5 seconds... but I expected it to fire ever 10 seconds :-(

Shoot me.

==== added ====

I need the first pane (tab_airco) to update every x seconds (5000 ms = 5 sec).

But ...

At initial start of the program ('http://airco.local') the first pane (tab_airco), which is active (class="active") at start, is not updated at all.

If I switch from the first (default active) pane to another pane ('http://airco.local/#tab_graphs' for instance) and than switch back again to the first pane ('http://airco.local/#tab_airco') thán the content of the pane gets updated at regular interval (5 seconds).

Now I'm starting to think that this part of the code is not executed:

// Create a timer than update aircoState every n secondes
$('#tab_airco').on('load-success.bs.table', function (e,data){
console.log("tab_airco loaded");
//alert("clearInterval(updateAircoState)");
//clearInterval(updateAircoState);
if ($('.nav-tabs .active > a').attr('href')=='#tab_airco') {
console.log("#tab_airco activated! setTimeout(5000)");
Timer_UpdateAirco = setTimeout(function(){
$('#aircoState').bootstrapTable('refresh',{silent: true, showLoading: false, url: '/getAirco.json'});
$('#aircoTemp').bootstrapTable('refresh',{silent: true, showLoading: false, url: '/getAirco.json'});
updateAircoState();
},5000);
}
});


Does that have something to do with the on('load-success.bs.table' attribute (the whole bootstrap is so difficult to understand for a newbe).

on('load-success.bs.table'

What I want to know is how I can change my program so it will update the tab_airco pane at initial load ('http://airco.local')

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

5000

10000

5000

setInterval