AJAX automatyczne odświeżanie – część II

Sprawa wyglada tak. Ponad dwa lata temu napisałam post o automatycznym odświeżaniu zawartości strony po zmianach w bazie. Mimo, że moim głównym celem było podzielenie się samą koncepcją, nie sądzę aby niektórym o wystarczyło ;o) Tak więc już jest. Część druga automatycznego odświeżania z przykładem online opartym o jQuery.

Biblioteka JS

Tym razem zdecydowałam się wykorzystać jQeury. Głównie dlatego, że wykorzystuje go na codzień, a poza tym prototype nie jest już tak popularny. Podobał mi się jako fajna i mniejsza alternatywa dla jQuery, ale bądźmy szczerzy – jeśli potrzebujesz czegoś mniejszego niż jQuery wykorzystaj zwykły javascript. W innym wypadku użyj jQuery ;o) Ale to moja osobista opinia.

Część druga

Jeśli część druga, to powinno być więcej zmian. Koncepcja jest nadal ta sama. Jeśli jesteś jej ciekawy lub po prostu chcesz zobaczyć jak to było dwa lata temu, zobacz stary wpis. Nie będę go usuwać, ale też nie chcę bardziej mieszać. Stąd ten post.

Nowy kod jest bardziej elegancki i bardziej ‘pro’ ;o) Nawet zamiast dwóch zapytań ajaxowych wykorzystałam jedno. Zdecydowałam się też żeby wykorzystać JSON i atrybut data. Dzięki temu nie potrzebny jest dodatkowy kod do tego celu.

Przykład online

Niektórzy mogą powiedzieć “nareszcie”. Nie winię ich za to, ale wiadomo – człowiek musi jeść, kupować jedzenie do tego. Pieniędzmi. Bezsensu, nie? Tak czy inaczej, przejdź do demo online żeby zobaczyć skrypt w akcji. W drugim oknie otwórz ten mały formularz z polem tekstowym. Zmień rozmiar okien tak aby oba były widoczne. Dodaj coś za pomocą formularza i czekaj. Nie odświeżaj strony z listą wiadomości. Chodzi właśnie o to, żeby odświeżyła się automatycznie jeśli nastąpiły jakieś zmiany. Po prostu poczekaj 20 sekund żeby zobaczyć swoją wiadomość. Nie dodawaj tylko jakiś głupich tekstów. Możesz dodać coś śmiesznego, albo coś w stylu “Uwielbiam Cię”, “You’re my hero” itd. To tylko demo ;o)

Kod źródłowy

Paczka zawiera plik .sql z tabelą którą należy utworzyć aby uruchomić demo. Dodatkowo w pliku db.php musisz zmienić dane do łączenia się z bazą. W pliku index.php możesz znaleźć funkcję JS i strukturę html. Nic więcej tak naprawdę. Common.php dodałam, ponieważ wydawało mi się, że 3 pliki to za mało ;o) Oczywiście to nie prawda. Po prostu nie chciałam się powtarzać. Pamiętaj, że jest to demo. Tylko po to aby pokazać Ci, że idea sprzed dwóch lat naprawdę działa ;o) Po prostu dostosuj tę koncepcję do swoich potrzeb i wymagań.

Pobierz kod źródłowy

db.php

W tym pliku znajdziesz wszystkie funkcje, których potrzebowałam aby porozmawiać z bazą danych. Są tam dwie bardzo ważne funkcje. Pozostałe są na potrzeby demo. Check_changes i register_changes to funkcje potrzebne do zrobienia magii ;o) Za każdym razem jak dodasz, edytujesz lub usuniesz zawartość, musisz zarejestrować tę zmianę. Nie możesz polegać na liczbie wierszy w tabeli, ponieważ podczas edycji (która jest zmianą zawartości) liczba wierszy jest ta sama. Dlatego potrzebny jest licznik. Możesz go przenieść do jakiejś innej tabelki lub cokolwiek innego. Tylko zaktualizuj go za każdym razem gdy nastąpi jakaś zmiana.

checker.php

Jest to plik, który wyświetla nam rezultat zapytania ajaxowego. Zapytanie ajax jest wysłane. Checker sprawdza czy obecny licznik różni się od tego co jest w bazie, jeśli tak, to pobiera nową listę wiadomości. Obecna wartość licznika jest wysyłana razem z zapytaniem ajaxowym i przechowywana w atrybucie data ‘data-counter’ w div#message-container. Kiedy użytkownik otwiera stronę po raz pierwszy, nie zapomnij pobrać licznika z bazy i ustawić go w data-counter.

Ostatnie przemyślenia

To powinno dać Ci dobry start. Powienieneś zmodyfikować skrypt w oparciu o własne wymagania. Dla przykładu jeśli potrzebujesz odświeżać listę wiadomości, która nie może być edytowana lub usuwana, nie potrzebujesz licznika. W check_changes możesz po prostu sprawdzić liczbę wierszy w tabeli i ta liczba wierszy może być Twoim licznikiem. Liczba, licznik, liczenie… To tyle na dziś. Powodzenia!