Updating Div of data from a Json file without flashing the screen

Question

Updating Div of data from a Json file without flashing the screen

Asked 10 years, 4 months ago

Viewed 1,394 times

2

I am using the script below to take values that are in a Json file (which is stored in an industrial automation equipment connected on a TCP/IP network and is "type" a ULTRA basic web server) and put them in Divs of a Divs page based on Div ID. The script is inside that index.html file that is stored on my PC that is also connected on the same network.

This "server" is ULTRA limited because it does not allow me to make any special configuration to avoid the cross-Omain problem, it does not run anything server-side and has very little memory (30Kb). That’s why I have to run the pages that take information from this equipment, on my PC. Basically it takes sensor information from an industrial plant and replaces the values of type ":="BD". TAG:" (of the Json file in it) in known values.

Script inside the index.html

<script>
    function callback(json)
    {
        document.getElementById("Nro_Ensaio").innerHTML = json.Nro_Ensaio;
        document.getElementById("SP_Pelotas1").innerHTML = json.SP_Pelotas;
        document.getElementById("SP_Pelotas2").innerHTML = json.SP_Pelotas;
        document.getElementById("PV_Pelotas1").innerHTML = json.PV_Pelotas;
        document.getElementById("Status").innerHTML = json.Status;
    }
</script>
<script type="text/javascript" src="http://192.168.0.103/awp/VAR_PRENSAS/ensaio.json"></script>

Essay.json

callback({
    'Inicia': ':="ENSAIO".CMDS.LIBERA:',
    'Rearme': ':="ENSAIO".CMDS.RESET:',
    'Nro_Serie': ':="ENSAIO".Nro_Serie:',
    'Modelo': ':="ENSAIO".Modelo:',
    'Nro_Ensaio': ':="ENSAIO".Nro_Ensaio:',
    'Pronto': ':="ENSAIO".Pronto:',
    'Data': ':="ENSAIO".Data:',
    'Hora': ':="ENSAIO".Hora:',
    'SP_Pelotas': ':="ENSAIO".SP_Pelotas:',
    'PV_Pelotas': ':="ENSAIO".PV_Pelotas:',
    'Status': ':="ENSAIO".Status:'
});

When I open the index.html file in any browser I can see the data received by this device, but I need these values to be updated every second. I tried to update the page with the code below, but the data I receive from the equipment keeps flashing during the page update.

<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
</head>
<body onload="JavaScript:timedRefresh(1000);">

How can I do to read this json file every second and update the data from the index.html page without "flashing" the page during the update?

Have you looked at this question/answer? http://answall.com/questions/6626/como-crea-um-site-sem-reloade-a-cada-clique-num-link

– Sergio

2014/07/18 at 09:19
Already @Sergio, but due to limited equipment I can’t do it on it.

– Rafael Mofati

2014/07/18 at 12:28

1 answer

Browser other questions tagged javascript html json updating

You are not signed in. Login or sign up in order to post.

by anmaia • **2,420** points · Answer 1 · 2014-07-18T00:42:03+00:00

In this case, to not "blink" the screen, you should call the javascript several times and not the location.reload().

Change the setTimeOut function to Chara Callback and place the callback call at the end of the body.

Example

HTML

<body>

<script>
    function callback(json)
    {
        document.getElementById("Nro_Ensaio").innerHTML = json.Nro_Ensaio;
        document.getElementById("SP_Pelotas1").innerHTML = json.SP_Pelotas;
        document.getElementById("SP_Pelotas2").innerHTML = json.SP_Pelotas;
        document.getElementById("PV_Pelotas1").innerHTML = json.PV_Pelotas;
        document.getElementById("Status").innerHTML = json.Status;
    }
</script>

<script type="text/javascript" src="http://192.168.0.103/awp/VAR_PRENSAS/ensaio.json"></script>
</body>

Essay.json

 setTimeout(function(){
        callback({
            'Inicia': ':="ENSAIO".CMDS.LIBERA:',
            'Rearme': ':="ENSAIO".CMDS.RESET:',
            'Nro_Serie': ':="ENSAIO".Nro_Serie:',
            'Modelo': ':="ENSAIO".Modelo:',
            'Nro_Ensaio': ':="ENSAIO".Nro_Ensaio:',
            'Pronto': ':="ENSAIO".Pronto:',
            'Data': ':="ENSAIO".Data:',
            'Hora': ':="ENSAIO".Hora:',
            'SP_Pelotas': ':="ENSAIO".SP_Pelotas:',
            'PV_Pelotas': ':="ENSAIO".PV_Pelotas:',
            'Status': ':="ENSAIO".Status:'
        });
    }, 1000);