Odśwież zawartość strony automatycznie co określony czas – jQuery

Jeśli chcesz odświeżyć stronę albo jej część co x sekund, potrzebujesz tylko trochę javascriptu. Przedstawię kilka podstaw za pomocą jQuery

Najważniejsza funkcja/metoda

setInterval(function,milisekundy,język);

To podstawowa metoda javascriptu, która pozwala na wywołanie jakiejś funkcji co każde x milisekund. Można o tym przeczytać więcej na stronie w3schools.com

Będę ją wykorzystywać we wszystkich moich przykładach. Pierwsze dwa parametry są wymagany, a trzeci opcjonalny. Pamiętaj że 1s = 1000ms.

Dla przykładu, jeśli chcę wywołać funkcję moja_funkcja() co 5 sekund (5 sekund * 1000 = 5000ms) wystarczy, że napiszę tak:

setInterval("moja_funkcja();",5000); 

Odświeżanie całej strony

Czasem potrzebujemy odświeżyć całą stronę. Nie jest to teraz zbyt powszechne ponieważ nie jest to najlepsze dla wydajności (choć wszystko zależy od kontekstu i gdzie to zastosujemy), ale należy o tym wpsomnieć. Tak więc aby odświeżyć stronę co 5 sekund nasz kod wyglądałby tak:

<script type="text/javascript">
  setInterval("moja_funkcja();",10000); 
 
    function moja_funkcja(){
        window.location = location.href;
    }
</script>

Odświeżanie fragmentu strony

Jeśli potrzebujesz odświeżyć zawartość jakiegoś div-a na stronie, możesz użyć funckji load() z jQuery. 

$('#id_do_odswiezenia').load('twoj_adres_www #id_ladowanej_tresci');

Dla lepszego zrozumienia spójrz na przykład poniżej:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js">
  <script type="text/javascript">
    setInterval("moja_funkcja();",5000); 
    function moja_funkcja(){
      $('#odswiez').load(location.href + ' #czas');
    }
  </script>
</head>
<body>
  <div id="odswiez"></div>
  <div id="czas">
    <?php echo date('H:i:s');?>
  </div>  
</body>
</html>

Można zauważyć że co 5 sekund div o id=”odswiez” jest aktualizowany. Oczywiście nasze divy w hml-u mogą wyglądać tak:

<div id="odswiez">
  <div id="czas">
    <?php echo date('H:i:s');?>
  </div>
</div>

Użyłam dwóch osobnych kontenerów, aby widoczne były zmiany i działanie funkcji. Można oczywiście wpisać adres innej strony, albo wysłać jakieś dane, jednak to jest częściej wykorzystywane podczas interakcji z użytkownikiem, a nie przy automatycznym odświeżaniu.

Jeśli chcesz zobaczyć coś jeszcze bardziej skomplikowanego, zobacz część drugą automatycznego odświeżania ajaxem.

3.8 4 votes
Article Rating