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ń.
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!
Witaj kokers
Możliwe jest przerobienie db.php bądź checker.php w ten sposób aby po zmianie stałego rekordu w bazie danych mogło wyświetlać to na stronie index.php ?
Z poważaniem
Wojciech Sukiennik
Niech i będzie, że MIT ;o)
Na jakiej licencji jest ten kod ? :)