刷新div的每次新记录插入mysql数据库

Question

I'm working on SCADA system on my webpage and want to refresh certain div's with gif's only when any of 2 tables from mysql database change.

And also i want to do it everytime the change occur (new record in table). When these 2 tables stay the same no action should be made (no new records).

Whole webpage is php/html and this is my first approach to javascript/ajax. I've tried using:

  setInterval($('. examplediv).load(location.href + ' .examplediv), 1000);

but it doesn't suit my needs. It makes my graphics flicker with each refresh when they should be static. To simplify: I want to reload them only if state in table changes from a->b so i swap a.gif with b.gif.

I can detect change in mysql tables by: record ID, timestamp or table checksum but struggle hard with javascript.

<div class="refresh"> // div i want to refresh
  <h3>PIR</h3>        // sensor name
  <p>Online: <?echo $aonline;?></p>  // echoing result of query if  sensor is online
  <p>State: <?echo $pirstan;?></p>      // echoing current state of  sensor
  <p>Last changed: <?echo $rowpir['Czas'];?></p>  //echoing timestamp of previous state of sensor
   <img class="center" src="pir.gif" alt="Kontrakton"> // showing image related to current sensor state (for example walking person to PIR sensor)
  </div>

Any help with problem above would be apprieciated. Especially example code with comments so i understand the matter. Other approach to the problem is also welcome, maybe I'm short-sighted.

Answer 1

You can use a websocket or socket.io to solve your problem example:

When your client get the info You can straight make an ajax call

socket.on('notification', function(){
  ajaxFunction();
});

If you dont want to you this method. p/s This is just a suggestion. Do validation fetch row data old and compare row data new in your backend.

Via js

<script>

var old_count = 0;

setInterval(function(){    
    $.ajax({
        type : "POST",
        url : "test.php",
        success : function(data){
            if (data > old_count) {
                alert('new record on i_case');
                old_count = data;
            }
        }
    });
},1000);

</script>

Answer 2

For those interested in future, final code thanks to: Fiido93

<script type="text/javascript">
var old_count = 0;
setInterval(function(){    
    $.ajax({
        type : "POST",
        url : "test.php",
        success : function(data){
            if (data > old_count) {
                   $('.divname' ).load(window.location.href + ' .divname');
               old_count = data;
           }
        }
    });
},1000);

and test.php

$result = mysqli_query($conn,"mysqlquery");
while($row = mysqli_fetch_array($result))
{
    $printme= $row[0];   // i only echo row 0 here !!
} 
echo "$printme";