Question 209900 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Delay an automatic reload if a div is visible

I tried to create a small project to track flying over my area.
Using python package for flight-radar24 API, I successfully got the needed data.

I’ve created systemd service to launch my python script every x seconds. This script output a html file named "data.html".
Each plane output two div: One visible with few information, one invisible with more detailed information.

Second part of the project is to show the retrieved data. I proceed as follow:

  • 1/ simple webpage (index.html)
  • 2/ CSS file
  • 3/ A clock (JavaScript, just to show the time) on the "header" part of index.html
  • 4/ jQuery (to use jQuery, locally downloaded)
  • 5/ A reloading JavaScript (fetch and print data.html into the "datadiv" of index.html)
  • 6/ A "popup" manager, so you can see a nice div with additional information while clicking on a plane.

My problem is that I failed at stopping the auto-reloading mechanism when the "popup" is visible. If you click on a plane while the reloading is scheduled in 1 or 2 seconds, you don’t have time to read.

I tried using "clearInterval/clearTimeout" in the click function without any success.

I tried the following:

  • Merging some js file, thinking I could have a variable scope issue.
  • Creating the "popup" div in index.html and keeping it empty, then just change the content using jQuery so this div exists before the data.html is loaded.
  • Using setTimeout instead of setInterval.
  • And to many thing I can’t remember…

The popup code (each plane ("trigger") got it’s own div ID with additional information (eXYZ)):

$(function() {

   $('.trigger').click(function(e) {
     $('.plane_info').hide();
     $('div#e'+this.id).show();
   });

   $('.trigger').mouseleave(function(e) {
     $('div#e'+this.id).hide();
   });

 });

The reloading code:

function setupRefresh()
{
    setInterval("refreshBlock();",5000);
}

function refreshBlock()
{
    $('#datadiv').load("../data.html");
}
setupRefresh();
Tags:

3

Answers


  1. 0

    Ah, I see you’re facing an interesting challenge with your project! To address the issue of preventing automatic reloading when the "popup" is visible, you can modify the reloading code by adding a condition to check if the popup is currently visible before triggering the reload. Let’s make the necessary adjustments:

    <!DOCTYPE html>
<html>
<head>
  <title>Flight Radar</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="header">
    <!-- Clock display here -->
  </div>
  <div id="datadiv">
    <!-- Data from data.html will be loaded here -->
  </div>

  <script src="jquery.js"></script>
  <script>
    $(function() {
      $('.trigger').click(function(e) {
        $('.plane_info').hide();
        $('div#e' + this.id).show();
        stopAutoReload();
      });

      $('.trigger').mouseleave(function(e) {
        $('div#e' + this.id).hide();
        restartAutoReload();
      });

      function setupRefresh() {
        intervalID = setInterval(refreshBlock, 5000);
      }

      function refreshBlock() {
        if ($('.plane_info').is(":hidden")) {
          $('#datadiv').load("../data.html");
        }
      }

      function stopAutoReload() {
        clearInterval(intervalID);
      }

      function restartAutoReload() {
        setupRefresh();
      }

      var intervalID; // Variable to store the interval ID
      setupRefresh(); // Start the automatic reloading initially
    });
  </script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    You omitted the part of the code where you tried using clearInterval… but given that you aren’t capturing the return value of setInterval, I can guess what went wrong:

    In order to use clearInterval you need to capture the interval ID when setting the interval, so the browser can know which one to clear.

    let foo = setInterval(refreshBlock,5000); // when you want to start refreshing

// ...

clearInterval(foo); // when you want to stop refreshing
    Login or Signup to reply.
  3. 0

    Let’s try a simple approach:

    • Have a variable called isVisible that tracks whether the popup is visible or not
    • Conditionally run refreshBlock if the popup is not visible
    let isVisible = false;

function togglePopup( toggle ) {
  if ( toggle ){
    $(".content").show();
    isVisible = true;
  } else {
    $(".content").hide();
    isVisible = false;
  }
}
let counter = 0;

function refreshBlock(){
  if ( !isVisible ){
    console.log("Reloading...", ++counter);
  }
  // Alternatively, you can discard the isVisible variable, and just check
  // whether the popup element is visible or not:
  /*
  if ( $(".content").is(":hidden") ){
    console.log("Reloading...", ++counter);
  }
  */
}

setInterval(refreshBlock, 1000);
    .content {
  position: absolute;
    top: 50%;
    left: 50%;
  width: 200px;
    height: 100px;
    background-color: #e8eae6;
    padding: 10px;
    z-index: 100;
    display: none;
}
        
.close-btn {
  position: absolute;
    right: 20px;
    top: 15px;
    background-color: black;
    color: white;
    padding: 4px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button onclick="togglePopup(true)">show popup</button>
    <div class="content">
        <div onclick="togglePopup(false)" class="close-btn">
            ×
        </div>
        <h3>Popup</h3>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search