JQuery wallboard con notifiche sonore e celle/celle lampeggianti

Question

Ho una pagina con query SQL all'interno di una tabella che mostra i risultati su un grande schermo.

Ho poi passare alla index.php che contiene questo codice:

// <![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> 

Così carichi questa pagina costantemente.

Quello che mi piacerebbe fare è farlo in modo che se una qualsiasi delle query contiene dati che devono essere sottoposti a un'azione, la cella della tabella lampeggerà 2 colori e anche un suono verrà riprodotto ogni 5 minuti.

Quale sarebbe il modo migliore per farlo e mantenere il carico costante della pagina?

Answer 1

Vorrei cambiare il .load() in una chiamata Ajax, che chiama una funzione al termine. Controlla il seguente script:

// 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); 
});