$.getJSON correctly executed, but js tags not updated

Question

I'm not an expert on JS and i'd like to have any support. I'm trying to update many tags (1 in code here under) every 1000ms.

I'm using this code :

<script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({ cache: false });
                setInterval(function() {
                $.getJSON("Maj_Tag_PLC.htm", function(data){
                    $('#watchdog').text(data.watchdog);
                    });
                },1000);
        });

This getjson seems working because i see "the response" in network tab (chrome) with updated tags :

{ "watchdog" : 29304, "count" : 29304, "Etat_Lampe_Plafond_Cuisine" : 0, "Etat_Lampe_Tetes_Murs_Cuisine" : 0, "Etat_Lampe_Plafond_Salon_Rue" : 0, "Etat_Lampe_Plafond_Salon_Jardin" : 0, "Etat_Lampe_Tetes_Murs_Salon" : 0, "Temps_Restant_Plafond_Cuisine" : T#0MS, "Temps_Restant_Tetes_Murs_Cuisine" : T#0MS, "Temps_Restant_Plafond_Salon_Rue" : T#0MS, "Temps_Restant_Plafond_Salon_Jardin" : T#0MS, "Temps_Restant_Tetes_Murs_Salon" : T#0MS, "Temps_Total_Plafond_Cuisine" : T#0MS, "Temps_Total_Tetes_Murs_Cuisine" : T#0MS, "Temps_Total_Plafond_Salon_Rue" : T#0MS, "Temps_Total_Plafond_Salon_Jardin" : T#0MS, "Temps_Total_Tetes_Murs_Salon" : T#0MS }

--> this correpond to my "Maj_Tag_PLC.htm"

Great !

But, the following part of my code seems never executed :

$('#watchdog').text(data.watchdog)

I say that because watchdog field is never update and script never stop on this line if i put a breakpoint on it.

Any idea what happend?

Thanks for you help

(i ve read some informations about "asynchronous query" and the fact that this part of "script could be executed before the answer could be returned" but i don't really understand what does it mean and how to solve it.)

{
"watchdog" : :="DB_HMI".Watchdog_int:,
"count" : :="DB_HMI".Watchdog_int:,

"Etat_Lampe_Plafond_Cuisine" : :="DB_HMI".Lampe_Plafond_Cuisine.Etat_Lampe:,
"Etat_Lampe_Tetes_Murs_Cuisine" : :="DB_HMI".Lampe_Tetes_Murs_Cuisine.Etat_Lampe:,
"Etat_Lampe_Plafond_Salon_Rue" : :="DB_HMI".Lampe_Plafond_Salon_Rue.Etat_Lampe:,
"Etat_Lampe_Plafond_Salon_Jardin" : :="DB_HMI".Lampe_Plafond_Salon_Jardin.Etat_Lampe:,
"Etat_Lampe_Tetes_Murs_Salon" : :="DB_HMI".Lampe_Tetes_Murs_Salon.Etat_Lampe:,

"Temps_Restant_Plafond_Cuisine" : :="DB_HMI".Lampe_Plafond_Cuisine.Temps_Restant:,
"Temps_Restant_Tetes_Murs_Cuisine" : :="DB_HMI".Lampe_Tetes_Murs_Cuisine.Temps_Restant:,
"Temps_Restant_Plafond_Salon_Rue" : :="DB_HMI".Lampe_Plafond_Salon_Rue.Temps_Restant:,
"Temps_Restant_Plafond_Salon_Jardin" : :="DB_HMI".Lampe_Plafond_Salon_Jardin.Temps_Restant:,
"Temps_Restant_Tetes_Murs_Salon" : :="DB_HMI".Lampe_Tetes_Murs_Salon.Temps_Restant:,

"Temps_Total_Plafond_Cuisine" : :="DB_HMI".Lampe_Plafond_Cuisine.Temps_Total:,
"Temps_Total_Tetes_Murs_Cuisine" : :="DB_HMI".Lampe_Tetes_Murs_Cuisine.Temps_Total:,
"Temps_Total_Plafond_Salon_Rue" : :="DB_HMI".Lampe_Plafond_Salon_Rue.Temps_Total:,
"Temps_Total_Plafond_Salon_Jardin" : :="DB_HMI".Lampe_Plafond_Salon_Jardin.Temps_Total:,
"Temps_Total_Tetes_Murs_Salon" : :="DB_HMI".Lampe_Tetes_Murs_Salon.Temps_Total:

}

<!-- AWP_In_Variable Name='"DB_HMI".Watchdog_int' -->

<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Cave.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Jardin.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Veranda_Buanderie.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Garage.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Grenier.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_WC.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Cuisine.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Cuisine.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Jardin.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Rue.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Salon.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Rue.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Chambre_Amis.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_TAO.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Entre_Fenetre_Chambre_TAO.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_Parent.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_SDB.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Hall_De_Nuit.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Grenier.Cmd_Lampe' -->

<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Cave.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Jardin.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Veranda_Buanderie.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Garage.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Grenier.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_WC.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Cuisine.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Cuisine.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Jardin.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Rue.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Salon.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Rue.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Chambre_Amis.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_TAO.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Entre_Fenetre_Chambre_TAO.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_Parent.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_SDB.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Hall_De_Nuit.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Grenier.Etat_Lampe' -->

<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Cave.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Jardin.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Veranda_Buanderie.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Garage.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Grenier.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_WC.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Cuisine.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Cuisine.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Jardin.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Rue.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Salon.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Rue.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Chambre_Amis.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_TAO.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Entre_Fenetre_Chambre_TAO.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_Parent.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_SDB.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Hall_De_Nuit.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Grenier.Temps_Restant' -->

<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Cave.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Jardin.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Veranda_Buanderie.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Garage.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Grenier.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_WC.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Cuisine.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Cuisine.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Jardin.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Rue.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Salon.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Rue.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Chambre_Amis.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_TAO.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Entre_Fenetre_Chambre_TAO.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_Parent.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_SDB.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Hall_De_Nuit.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Grenier.Temps_Total' -->



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta http-equiv="refresh" content="5" > -->
<script src="jquery-3.4.1.min.js"></script>

<style>

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
content:'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'ON';
}

/*--------- END --------*/

/*----------TAbleau -----*/

table
{
    border-collapse: collapse; 
}
td
{
    border: 1px solid black;
	
}


</style>
</head>
<body>

-- Affichage watchdog mis a jour-----------------
<br />
watchdog :  
<label id="watchdog">0</label>
<br />
watchdog 2:  
<label id="watchdog2">0</label>

<br /> Lampe Cave etat lampe : <label id="Lampe_Cave_etat_lampe">0</label> <br />

<br />
 

-- Affichage myint -----------------
<br />

watchdog : :="webdata".myInt:
 
<br />



-- Affichage bool mis à jour -----------------
<br />

 <br /> Bool1 : <label id="bool1">0</label> <br />
 
------------------ Gestion lumières-------------------
<br />

<table>

	<tr> 
		<td> Plafond_Cuisine </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Plafond_Cuisine" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Plafond_Cuisine.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
		<td> Temps restant = <label id="Temps_Restant_Plafond_Cuisine">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Plafond_Cuisine">0</label></td> 
	</tr>
	
	<tr> 
		<td> Tetes_Murs_Cuisine </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Tetes_Murs_Cuisine" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Tetes_Murs_Cuisine.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
				<td> Temps restant = <label id="Temps_restant_Tetes_Murs_Cuisine">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Tetes_Murs_Cuisine">0</label></td> 
	</tr>	
	
		<tr> 
		<td> Plafond_Salon_Jardin </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Plafond_Salon_Jardin" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Plafond_Salon_Jardin.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
		<td> Temps restant = <label id="Temps_Restant_Plafond_Salon_Jardin">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Plafond_Salon_Jardin">0</label></td> 
	</tr>

	<tr> 
		<td> Plafond_Salon_Rue </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Plafond_Salon_Rue" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Plafond_Salon_rue.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
		<td> Temps restant = <label id="Temps_Restant_Plafond_Salon_rue">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Plafond_Salon_rue">0</label></td> 
	</tr>
		
	<tr> 
		<td> Tetes_Murs_Salon </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Tetes_Murs_Salon" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Tetes_de_Murs_Salon.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
				<td> Temps restant = <label id="Temps_Restant_Tetes_Murs_Salon">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Tetes_Murs_Salon">0</label></td> 
	</tr>	
	
	
</table>
	 -----------------------------------------------------------------

</body>

<script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({ cache: false });
				setInterval(function() {
				$.getJSON("Maj_Tag_PLC.htm", function(data){
					$('#watchdog').text(data.watchdog);

					});
					
				},1000);
	
		});
  


					/*
										$('#watchdog2').text(data.count);
					$('#Etat_Lampe_Plafond_Cuisine').prop("checked",data.Etat_Lampe_Plafond_Cuisine);
					$('#Etat_Lampe_Tetes_Murs_Cuisine').prop("checked",data.Etat_Lampe_Tetes_Murs_Cuisine);
					$('#Etat_Lampe_Plafond_Salon_Rue').prop("checked",data.Etat_Lampe_Plafond_Salon_Rue);
					$('#Etat_Lampe_Plafond_Salon_Jardin').prop("checked",data.Etat_Lampe_Plafond_Salon_Jardin);
					$('#Etat_Lampe_Tetes_Murs_Salon').prop("checked",data.Etat_Lampe_Tetes_Murs_Salon);
					$('#Checkbox_Plafond_Cuisine').prop("checked",data.Etat_Lampe_Plafond_Cuisine);
					$('#Temps_Restant_Plafond_Cuisine').text(data.Temps_Restant_Plafond_Cuisine);
					$('#Temps_Total_Plafond_Cuisine').text(data.Temps_Total_Plafond_Cuisine);
					$('#Checkbox_Tetes_Murs_Cuisine').prop("checked",data.Etat_Lampe_Tetes_Murs_Cuisine);
					$('#Temps_Restant_Tetes_Murs_Cuisine').text(data.Temps_Restant_Tetes_Murs_Cuisine);
					$('#Temps_Total_Tetes_Murs_Cuisine').text(data.Temps_Total_Tetes_Murs_Cuisine);
					$('#Checkbox_Plafond_Salon_Rue').prop("checked",data.Etat_Lampe_Plafond_Salon_Rue);
					$('#Temps_Restant_Plafond_Salon_Rue').text(data.Temps_Restant_Plafond_Salon_Rue);
					$('#Temps_Total_Plafond_Salon_Rue').text(data.Temps_Total_Plafond_Salon_Rue);
					$('#Checkbox_Plafond_Salon_Jardin').prop("checked",data.Etat_Lampe_Plafond_Salon_Jardin);
					$('#Temps_Restant_Plafond_Salon_Jardin').text(data.Temps_Restant_Plafond_Salon_Jardin);
					$('#Temps_Total_Plafond_Salon_Jardin').text(data.Temps_Total_Plafond_Salon_Jardin);
					$('#Checkbox_Tetes_Murs_Salon').prop("checked",data.Etat_Lampe_Tetes_Murs_Salon);
					$('#Temps_Restant_Tetes_Murs_Salon').text(data.Temps_Restant_Tetes_Murs_Salon);
					$('#Temps_Total_Tetes_Murs_Salon').text(data.Temps_Total_Tetes_Murs_Salon);
					*/


	function send_ajax_request(variable, fieldId) 
	{
		if (window.XMLHttpRequest) 
		{
			req = new XMLHttpRequest();		// Mozilla and others
		} 
		else if (window.ActiveXObject) 
		{
			req = new ActiveXObject("Microsoft.XMLHTTP");	// Microsoft
		} 
		else 
		{
			alert("Der Browser unterstuezt kein Ajax");
		}
		// Oringinal code : var value = document.getElementById(fieldId).value;
		var value = fieldId.checked;
		
		var req_url = "?"+variable+"="+value+"&"+Math.random();
		//debug alert(req_url);
		req.open("GET", req_url, false);
		//req.onreadystatechange = ajax_callback;
		req.send(null);
	}
</script>
</html>

Answer 1

Thanks for you support.

Correct, It was a parsing issue.

Best wishes

Answer 2

I think you need to decode the json formatted data like that :

$.getJSON("Maj_Tag_PLC.htm", function(data){
  let result = JSON.parse(data);
  $('#watchdog').text(result.watchdog);
});