I did ajax get request on php file that takes temperature data via snmp and give back a json array of data.
Now for every location I'm trying to generate only once the divs and then only update the values.
Treid to do on the first ajax request to generate the divs with the values inside already to an array and then display them but they won't display in the specific div.
I can see in the console that the array is properly populated. But I can't make it display all the elements in the div with id=data. Tried html(), append(), text() and nothing works.
How should I modify the code so the request won't take that much time?
I'm thinking of creating containers for every location temperature once with the first ajax request and then using setIntervals only getting the value and updating it so I guess it won't take that much time on the request and I will avoid page flickering cause only the numbers will change but how can I achieve that?
I don't want to reload the page.
$(document).ready(function(){
var tr_str = [];
var menu_list = [];
$.ajax({
url: 'getData.php',
type: 'get',
dataType: 'JSON',
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var location = response[i].location;
var temp_int = response[i].temp_int;
var temp = response[i].temp;
var hum = response[i].hum;
var dew = response[i].dew;
tr_str[i] = "<div id='locc" + i + "' class='location'>" +
"<span class='title'>" + location + "</span>" +
"<div class='temp'" + i + "><span>Temperatura: </span><span id='check'>" + temp + " °C</span></div>" +
"<div><span>Względna wilgotność: </span><span>" + hum + " %RH</span></div>" +
"<div><span>Punkt rosy: </span><span>" + dew + " °C</span></div>" +
"</div>";
menu_list[i] = "<label for='loc" + i + "'>" +
"<input type='checkbox' id='loc" + i + "' />" +
"<span class='css-checkbox'></span>" +
"<p>" + location + "</p>" +
"</label>";
}
},
});
console.log(tr_str);
console.log(menu_list);
$("#data").html(tr_str[0]);
<!-- language: lang-html -->
<body>
<div id="data" class="wrapper"></div>
</body>
