Tablica JQuery z powiadomieniami dźwiękowymi i migającymi komórkami div/table

Question

Mam stronę z zapytaniami SQL wewnątrz tabeli, która pokazuje wyniki na dużym ekranie.

I następnie przejdź do index.php, który zawiera ten kod:

// <![CDATA[ 
$(document).ready(function() { 

    // This part addresses an IE bug. without it, IE will only load the first number and will never refresh 
    $.ajaxSetup({ cache: false });  
    setInterval(function() { 
     $('.container').load('data.php'); 
    }, 2000); // the "2000" here refers to the time to refresh the div. it is in milliseconds. 
}); 
// ]]> 

HTML:

<div class="container"><h3>Loading Data...</h3></div> 

Więc ładuje stronę stale.

Chciałbym to zrobić, jeśli którekolwiek z zapytań zawiera dane, które wymagają podjęcia działań, komórka tabeli będzie migać w dwóch kolorach, a dźwięk będzie odtwarzany co 5 minut.

Jaki byłby najlepszy sposób na zrobienie tego i utrzymanie stałego ładowania strony?

Answer 1

Zmieniłbym .load() na wywołanie ajax, które wywołuje funkcję po zakończeniu. Sprawdź poniższy skrypt:

// Prepare the audio - replace the link with your own mp3 
var audioElement = document.createElement('audio'); 
audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2090.mp3'); 

// Global that will control the flashing/playing of sound 
var alertUser = false; 
$(document).ready(function() { 
    $.ajaxSetup({ cache: false });  // Fix IE bug 
    setInterval(function(){ 
     $.ajax({ 
      url: "data.php", 
      complete: function(jq, content){ 
       $('.container').html(jq.response); 
       if(jq.response.indexOf('from') != -1) { // your logic goes here to decide the warning 
        alertUser = true; 
       } else { 
        alertUser = false; 
       } 
      } 
     }); 
    }, 2000); 

    setInterval(function(){ 
     if(alertUser) { 
      // play tune 
      audioElement.play(); 

      // flash background 
      window.setTimeout(function(){ 
       $('.container').css('background-color','red') 
      }, 200); 
      window.setTimeout(function(){ 
       $('.container').css('background-color','blue') 
      }, 400); 
      window.setTimeout(function(){ 
       $('.container').css('background-color','transparent') 
      }, 600); 
     } 
    }, 1000); 
});