Constant reload of a DIV?

Question

Ok, I've looked around Stack and other places for the past 4 or 5 hours trying to find a solution to my problem.

I have an Iframe inside of a page which contains 5 lines of information, the information is fetched from a database. Said info will constantly change, therefor a need it to be refreshed every 1-5 seconds, can stretch to 10 seconds if needs be.

I have used the below code, which works, but crashed my browser(s) for some reason, I'm guessing reloading too fast?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
   var auto_refresh = setInterval(
   function ()
   {
      $('#info').load('mid.php');
   }, 5000); // refresh every 5000 milliseconds
</script>

Below is the code from mid.php (There is PHP inside the page but this is the part that I need refreshing).

<div id="info"><font size="2">
   <b>Crimes: </b><font color="white"><?php  if ($fetch->lastcrime <= time()){ echo  'Ready'; }else{   echo "".maketime($fetch->lastcrime).""; } ?></font><br>
   <b>GTA: </b><font color="white"><?php  if ($fetch->lastgta <= time()){ echo 'Ready'; }else{   echo "".maketime($fetch->lastgta).""; } ?></font><br>
   <b>Chase: </b><font color="white"><?php if ($fetch->last_chase < time()){ echo 'Ready'; }else{ echo "".maketime($fetch->last_chase).""; } ?></font><br>
   <b>Extortion: </b><font color="white"><?php if ($fetch->last_ext < time()){ echo  'Ready'; }else{ echo "".maketime($fetch->last_ext).""; } ?></font><br>
   <b>Rank:</b><?php echo "$fetch->rank"; ?></td></tr>
</div>
</table>

I know I can use HTML to refresh the Iframe but it looks unsightly when the whole top left corner of the screen refreshes every 3 seconds, any help is much appreciated.

Thanks

Answer 1

Use can use .load() callback, substitute setTimeout() for setInterval

$(document).ready(function() {

  let timeout;
  let duration = 5000;
  let stop = false;

  function update() {
    $("#info").load("mid.php", function() {
       if (timeout) {
         clearTimeout(timeout)
       }
       if (stop === false) {
         timeout = setTimeout(update, duration)
       }
    });
  }

  update();

});

Answer 2

Thanks.

I ended up using pretty much the same script, just splitting the PHP and HTML into separate files and calling the div from the HTML file.

Answer 3

I'd expect you to use Ajax calls for this kind of thing. You'd tonally ice jQuery to update the contents of elements in place to avoid the refresh of your iframe. Iframes are limited in their capabilities and it typically doesn't make sense to use them just for updating web page contents.

The browser crash may be coming from the use of set internal. If the calls take longer than 5 seconds to complete, multiple calls might stack up. But for your case I feel like it's not the problem, as it should be able to update that orange pretty quick. Any way, a better approach is to set a timer for one execution of your update process every time it gets done running. That way, if the call does take too long, you don't just keep stacking up requests.