JavaScript/AJAX

6 posts in category

Drzewko katalogów oparte na jsTree i SPL

Czasem aplikacja wymaga aby zaprezentować użytkownikowi drzewko  odzwierciedlające strukturę katalogów na serwerze. Zaprezentuję więc przykładowe rozwiązanie, oparte na jsTree (wyświetli drzewko po stronie klienta) oraz klasie DirectoryIterator z biblioteki SPL (wygeneruje drzewko po stronie serwera).

jQuery Tools

Chciałbym gorąco polecić pewną stronę na którą ostatnio się natknąłem: jQuery Tools. Serwis (jak wskazuje jego nazwa) prezentuje kilka rozszerzeń biblioteki jQuery. I to nie byle jakich!

Przykładowe komponenty to tooltip (wyświetla okienko informacyjne np w formularzach), overlay (wyskakujące okienka) czy scrollable (można nim opakować wszelkiego rodzaju przesuwane treści). Co wyróżnia jQuery Tools na tle innych, podobnych rozwiązań? Przede wszystkim jakość wykonania - efekty są ładne, działają poprawnie we wszystkich przeglądarkach i łatwo je wdrożyć. Dodatkowo serwis wypełniony jest przykładami dzięki którym szybko i bezboleśnie postawimy pierwsze kroki.

Praktycznie od ręki udało mi się dodać kilka efektów do bloga: tooltipy przy formularzach i wyszukiwarce, oraz wyskakujące okienko z formularzem kontaktowym.

Zend_Form i wysyłanie plików - cz. 3

Oto trzeci artykuł dotyczący wysłania plików na serwer przy użyciu komponentu Zend_Form. Tym razem pokażę jak wyświetlić użytkownikowi pasek postępu.

Pasek nie zadziała przy standardowej konfiguracji PHP. Wymagane jest jedno z dwóch rozszerzeń: APC lub uploadprogress. Zend Framework automatycznie wykryje które z nich jest dostępne i użyje go.

Założenia

Chcemy uzyskać prosty pasek pokazujący postęp wysyłania pliku w tle. Niech strona w określonym odstępie czasu (np 1/10 sekundy) wysyła zapytania do serwera, który zwróci żądaną informację.

Podobnie jak w poprzednim artykule przedstawione rozwiązanie musi być elastyczne - niech zadziała także gdy serwer nie obsługuje paska postępu lub gdy użytkownik wyłączy obsługę Java Script.

Podstawą będzie aplikacja napisana w poprzednim artykule.

Praktyczne okienko informacyjne

Często zachodzi potrzeba poinformowania użytkownika o sukcesie bądź niepowodzeniu jakiejś operacji, takiej jak zapisanie artykułu, wysłanie kometarza itd. Takie informacje można zaprezentować na kilka sposobów, jednak zazwyczaj będą one umieszczone statycznie gdzieś w górnej cześci strony.

Przy okazji pracy nad pewnym projektem postanowiłem podejść do tego tematu w niestandardowy sposób: po zapisaniu artykułu użytkownik zobaczy informację na środku strony, w ładnym okienku które samo zniknie po kliku sekundach. Jednocześnie rozwiązanie jest odporne na wyłączoną obsługę Java Script - w takim przypadku zostanie wyświetlone powyżej treści strony.

Wyświetlanie Google Maps w IE6/IE7

Google Maps potrafi sprawić wiele problemów użytkownikom starych przeglądarek Microsoftu. Zwłaszcza jeśli strona do której mamy je dodać jest oparta na nie walidującym się układzie tabelkowym. Przedstawiam dwa problemy które musiałem ostatnio rozwiązać.

Po otwarciu strony w IE6/7 pojawiła się przesunięta mapka:

Bezpośrednią przyczyną była najprawdopodobniej niedomknięta tabelka. Najlepszym rozwiązaniem jest posprzątanie kodu strony, co może być jednak nieopłacalne ekonomicznie dla naszego klienta.

Na szczęście istnieje prosta sztuczka którą możemy się posłużyć.

Zend_Form i wysyłanie plików - cz. 2

W poprzednim artykule zaprezentowałem wysyłanie plików z formularza opartego o komponent Zend_Form. Teraz tamten przykład zostanie wzbogacony o możliwość wysyłania w tle przy pomocy JavaScript-u i biblioteki jQuery.

Plan

Ze względów bezpieczeństwa interpreter JavaScript nie ma dostępu do systemu plików, zatem nie może brać bezpośredniego udziału w przesyłaniu. Transfer plików w tle można zrealizować przy pomocy małej sztuczki: formularz z plikiem może być przesłany poprzez niewidoczną ramkę (IFRAME). Po zakończeniu procesu serwer zwróci kod JavaScript który poinformuje użytkownika o sukcesie operacji (lub o ewentualnym niepowodzeniu).