Upon receiving a GET request, the values appear and the button disappears. View image here.
The button functions properly on localhost. See it in action here.
I'm attempting to incorporate a Facebook share button on a page with dynamic content like userid from an esp826 server. I am using JavaScript, specifically innerHTML with an AJAX call for a JSON object when the page body loads. Testing locally works fine as the JSON file loads quickly before the button, ensuring everything runs smoothly. However, when using the esp8266 server, there is a delay in the response causing the button to disappear once the values are populated. It seems like the CSS needs to be reloaded via JavaScript to revive the button box.
Is there a way to refresh the button?
The contents of the .json file are as follows:
{"temp1":"1", "energia":"2", "energiatotal":"3", "tem":"2", "cliente":"22", "usuario":"22"}To test locally, place the getajx.json file containing the above content in the same directory as the HTML page. It will work, but I need help resolving issues with long GET requests. Any suggestions?
I tried adding a flag after receiving a positive response and activating the reloadCss function, but it didn't work.
<script>
var temp1, energia, energiatotal, tem, cliente, usuario ;
var ok=0;
function GetAjx() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
ok = 1;
var myObj = JSON.parse(this.responseText);
document.getElementById("temp1").innerHTML = myObj.temp1;
document.getElementById("energiatotal").innerHTML = myObj.energiatotal;
document.getElementById("tem").innerHTML = myObj.tem;
}
};
if (ok = 1) {
function reloadCss(){
var links = document.getElementsByTagName("link");
for (var cl in links){
var link = links[cl];
if (link.rel === "stylesheet")
link.href += "";
}
}
};
xmlhttp.open("GET", "getajx.json" , true);
xmlhttp.send();
}
</script>