jQuery Odświeżanie strony

jQuery Odświeżanie strony

1.3tyś+ odsłon

8 sierpnia 2018 przez Mateusz Mikos

jQuery – odświeżanie strony. Często przeładowanie strony może się przydać. Nie zawsze mamy jednak dostęp do zrobienia tego inaczej niż przez jQuery.

jQuery Odświeżanie strony – jak to zrobić?

Jest to dosyć proste i łatwe! Jedynym minusem jest to, że sposobów na odświeżanie strony w jQuery jest nieskończona ilość. Zacznijmy więc pisać kod. Sam lub sama wybierz, która opcja jest dla Ciebie najwygodniejsza do zapamiętania i ponownego użycia. Jeżeli nie masz głowy do zapamiętywania linijek kodu to zapisz sobie ten post w zakładkach ????.
JQUERY ODŚWIEŻANIE STRONY

JQUERY ODŚWIEŻANIE STRONY

  Napiszmy sobie najpierw trochę HTML’a, żeby to ładnie zobrazować:  
<!DOCTYPE html>
<html>
   <head>
      <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
   
   </head>
   <body>
      <h1> Ta strona odświeży się po zamknięciu alertu :)</h1>
      <p> Tutaj wyświetlimy sobie czas załadowania strony, żeby mieć pewność, że się odświeża</p>
<span></span>
   </body>
</html>
W sekcji head naszego HTML dodałem najnowszą na tę chwilę wersję jQuery. Coś więcej na ten temat znajdziecie w innym poście. Jak widzicie napisałem tutaj jakieś głupoty o czasie. Nie jest to potrzebne przy odświeżaniu strony, ale by być pewnym, że nasz kod działa i strona się odświeża dodamy sobie funkcję, która będzie wstrzykiwać w SPAN czas załadowania strony (funkcja pobierająca czas będzie napisana w JS, ponieważ nie ma potrzeby używać jQuery). Teraz przejdźmy do jQuery.   Najpierw zajmiemy się wyświetlaniem czasu (gg:mm:ss) załadowania naszej strony. Nie musicie tego zapamiętywać, jest to nam potrzebne tylko do upewnienia się, że strona została odświeżona.  
$(document).ready(function(){
   var now = new Date(),
   now = now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
    $('span').html(now);
});
To, co dzieje się powyżej opiszę w innym wpisie ????.   Przejdźmy do sedna sprawy, czyli funkcji wyświetlającej alert i odświeżającej stronę:  
function pokaz_alert_i_odswiez()
{
  alert('To jest alert, kliknij cokolwiek żeby go zamknąć i odświeżyć stronę :)');
  location.reload()
}
Tworzymy funkcję o nazwie pokaz_alert_i_odswiez() bez żadnych argumentów w nawiasach. W otwartych klamrach dodajemy alert(), którego argumentem jest tekst. Jak sama nazwa wskazuje – metoda alert jest odpowiedzialna za wyświetlenie alertu. ostatnia metoda – location.reload() to ta, która odświeża stronę, przyjmuje ona argument typu logicznego, czyli true i false (domyślnie, czyli w naszym przypadku, jest to false). location.reload(true) oznacza odświeżenie zasobów, które znajdują się pod danym adresem prosto z serwera, natomiast location.reload(false) zaleca przeglądarce załadowanie strony z pamięci cache.   Po napisaniu funkcji potrzebujemy ją wywołać, robimy to zwykłym zapisaniem jej nazwy – pokaz_alert_i_odswiez();. Tak wygląda nasz cały kod:  
$(document).ready(function(){
   var now = new Date(),
   now = now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
    $('span').html(now);
});

function pokaz_alert_i_odswiez()
{
  alert('To jest alert, kliknij cokolwiek żeby go zamknąć i odświeżyć stronę :)');
  location.reload()
}

pokaz_alert_i_odswiez();
Tutaj macie podgląd Pena z Codepen, w którym jest ten cały przykład:  

See the Pen jQuery Odświeżanie strony w funkcji by AimWeb (@aimweb) on CodePen.

  Warto nie zapominać o tym, że pokaz_alert_i_odswiez(); możemy podpiąć np. do kliknięcia np. w div. Do HTMLa dodajemy diva, mniej więcej tak:
<h1> Ta strona odświeży się po zamknięciu alertu :)</h1>

<p> Tutaj wyświetlimy sobie czas załadowania strony, żeby mieć pewność, że się odświeża</p>
<span></span>
<div onclick="pokaz_alert_i_odswiez();"> Kliknij mnie aby odświeżyć! </div>
Ze skryptów usuwamy linijkę wywołującą funkcję: $(document).ready(function(){ var now = new Date(), now = now.getHours()+’:’+now.getMinutes()+’:’+now.getSeconds(); $(‘span’).html(now); }); function pokaz_alert_i_odswiez() { alert(‘To jest alert, kliknij cokolwiek żeby go zamknąć i odświeżyć stronę :)’); location.reload() }   I możemy sobie dopisać jakiś CSS do naszego diva: div{ background-color: red; color: white; cursor: pointer; border-radius: 5px; padding: 15px; width: 100px; text-align: center; font-weight: bold; } I gotowe. Cały przykład znajdziecie na Penie poniżej:  

See the Pen jQuery Odświeżanie strony po kliknięciu by AimWeb (@aimweb) on CodePen.

Mówiłem o dużej ilości możliwości, oprócz location.reload() możemy użyć:
history.go(0);
location.href = location.pathname;
location.replace(location.pathname);
location.href = location.href;
Ocena czytelników
[Wszystkich ocen: 1 Średnia: 5]

Raz kodzie śmierć!

Samozwańczy król Backend i przyszły książę WordPress. Programuję od 7 lat i nadal nie znalazłem ulubionego środowiska. Lubię nieszablonowe rozwiązania szablonowych problemów, czyli drogę pod górkę. Podobno moim głównym celem jest monopol na programowanie – napisać kod, którego nikt nie potrafiłby zrozumieć.

Zostaw komentarz i dołącz do dyskusji:

avatar