Elektroda.pl
Elektroda.pl
X

Search our partners

Find the latest content on electronic components. Datasheets.com
Elektroda.pl
Please add exception to AdBlock for elektroda.pl.
If you watch the ads, you support portal and users.

[AJAX] - Chmurka z informacją po wskazaniu elementu myszką

15 Aug 2012 20:49 1686 18
  • Level 23  
    Witam!
    Zabrałem się za robienie strony, na której jest kalendarz (terminarz) generowany za pomocą AJAX'a.
    Efektem końcowym ma być kalendarz z oznaczonymi kolorami komórkami pod którymi kryje się jakiś wpis. Po najechaniu myszką na takie pole ma pojawić się chmurka treścią tego wpisu. Kalendarz zrobiłem działa dobrze, komórki oznaczane są kolorami, ale nadszedł czas na chmurki. Wykorzystałem skrypt overlib no i tu pojawił się problem. Okazało się, że gdy plik otwieram bezpośrednio z przeglądarki okienka wyskakują prawidłowo. Gdy jednak plik wczytuję przez AJAX'a okazuje się, że chmurki się nie pojawiają. Patrząc na kod źródłowy domyślam się, że kalendarz generowany jest na serwerze, bo w źródle strony nie ma po nim śladu, widoczny jest tylko div odpowiedzialny za jego wyświetlenie. No i tu pojawia się moje pytanie. Czy da się w takiej sytuacji wyświetlić takie wyskakujące chmurki, a jeśli tak to w jaki sposób?
    [30.03.2021, webinar elektroda] Nowoczesna diagnostyka maszyn, monitorowanie i przewidywanie awarii. Zarejestruj się
  • Level 42  
    To są wady stosowania rozwiązań :( A czemu po prostu nie stworzysz warstwy z tłem w kształcie chmury, która będzie się pojawiała i pozycjonowała przy zdarzeniu onMouseOver i dodatkowo wywoływała AJAXowe pobieranie danych umieszczanych wewnątrz tegoż div'a? Rozwiązanie jest proste i nie trzeba żadnych zewnętrznych frameworków czy innych obciążających bibliotek.
  • Level 23  
    Dżyszla wrote:
    To są wady stosowania rozwiązań :( A czemu po prostu nie stworzysz warstwy z tłem w kształcie chmury, która będzie się pojawiała i pozycjonowała przy zdarzeniu onMouseOver i dodatkowo wywoływała AJAXowe pobieranie danych umieszczanych wewnątrz tegoż div'a? Rozwiązanie jest proste i nie trzeba żadnych zewnętrznych frameworków czy innych obciążających bibliotek.


    Możesz podrzucić jakiś prosty przykład. Dopiero zaczyna "przygodę" z AJAX'em i szczerze mówiąc trochę eksperymentuję.

    Z tego co widzę, to skrypt ten działa właśnie na zasadzie opisanej przez Ciebie, ale nie wiem właśnie jak tego ajax'a do tego wczepić :-(
  • Level 42  
    Prostego przykładu nie podrzucę, bo nie mam takowego pod ręką. Ale składa się to z kilku problemów:
    1. Pokazanie warstwy (styl display)
    2. Spozycjonowanie jej (styl position)
    3. Wczytanie zawartości (tutaj używamy połączenia AJAX, które zwraca wynik do własności innerHTML obiektu).
    3a. Utworzenie obiektu AJAX
    3b. Zdefiniowanie zdarzenia odpowiedzi, w którym nastąpi ustawienie
    3c. Wykonanie zapytania
    Wszystko to wykonujemy w opisanym zdarzeniu.
  • Level 23  
    Dżyszla wrote:
    Prostego przykładu nie podrzucę, bo nie mam takowego pod ręką. Ale składa się to z kilku problemów:
    1. Pokazanie warstwy (styl display)
    2. Spozycjonowanie jej (styl position)
    3. Wczytanie zawartości (tutaj używamy połączenia AJAX, które zwraca wynik do własności innerHTML obiektu).
    3a. Utworzenie obiektu AJAX
    3b. Zdefiniowanie zdarzenia odpowiedzi, w którym nastąpi ustawienie
    3c. Wykonanie zapytania
    Wszystko to wykonujemy w opisanym zdarzeniu.


    Trafiłem na pierwszy problem.
    Korzystam z takich funkcji w celu pobrania danych z pliku przez ajax:

    Code: javascript
    Log in, to see the code


    Do pliku przekazuję pewne dane za pomocą instrukcji
    Code: javascript
    Log in, to see the code

    Problem polega na tym, że muszę za pomocą ajax'a pozyskać dane z jeszcze jednego pliku, np. plik2.php. Próbuję zastosować ponownie takie funkcje ze zmianą nazwy funkcji, nazwy div'a i nazwy zmiennej, ale ajax nie działa.
    Jak pobrać dane z drugiego pliku?
  • Level 23  
    Dżyszla wrote:
    Robisz po prostu drugie zapytanie.


    Czyli co dokładnie muszę dopisać do powyższego kodu?
  • Level 42  
    Proponuję sparametryzować funkcję pobierzDane tak, abyś mógł podawać, z jakiego pliku ma korzystać (jakie wykonać zapytanie). Potem tylko w skrypcie wywołujesz ją dwa razy z różnymi parametrami - raz z zapytaniem o pierwszy plik, raz o drugi.
  • Level 23  
    Dżyszla wrote:
    Proponuję sparametryzować funkcję pobierzDane tak, abyś mógł podawać, z jakiego pliku ma korzystać (jakie wykonać zapytanie). Potem tylko w skrypcie wywołujesz ją dwa razy z różnymi parametrami - raz z zapytaniem o pierwszy plik, raz o drugi.

    Działałem jak mogłem, ale nie działa - co zrobiłem nie tak?

    Code: javascript
    Log in, to see the code
  • Level 23  
    Dżyszla wrote:
    A konkretnie "jak" nie działa? Jakiś błąd jest, czy wyniki niezgodne z oczekiwaniami czy w ogóle ich brak?


    Skrypty uruchamiam takim kodem:
    Code: javascript
    Log in, to see the code


    W efekcie ani jeden ani drugi skrypt nie działa.
    Gdy uruchamiam skrypty pojedynczo wszystko działa prawidłowo, ale dwa się chyba wzajemnie blokują.

    Zauważyłem, że skrypt przestał działać gdy pojawiły się w nim te dodatkowe if-y...

    Poradziłęm sobie, trzeba było zróżnicować też polecenie
    Code: javascript
    Log in, to see the code
    i zastosować dwie oddzielne funkcje.
  • Level 23  
    Jak już pisałem powyżej poradziłem sobie z problemem ajax'a.
    Mam jednak kolejny problem.
    Postanowiłem pójść trochę inną drogą i wykorzystałem do wyświetlania opisów pól terminarza zwykłe chmurki podpowiedzi, modyfikując ich wygląd i sposób działania za pomocą skryptu JS. Gdy ładuję nową stronę wszystko działa rewelacyjnie. Gdy jednak przeładuję kalendarz za pomocą ajax'a okazuje się, że wyświetlana jest standardowa chmurka podpowiedzi bez narzuconego przeze mnie formatowania. Wniosek? Podczas przeładowywania kalendarza za pomocą ajax'a strona gubi skrypt JS. Co zrobić w takiej sytuacji? Wrzucałem już skrypt w index i w plik przeładowywany ajax'em i nic :-(
  • Level 42  
    Wykonywanie AJAXa nie pozwala na wykonywanie kodu JS zawartego w odpowiedzi, jeśli w tym leży przyczyna... Trzeba wykonać wtedy polecenie eval, ale to z kolei zadziała tylko w odniesieniu do kodu JS. Raczej trudno jest zwrócić i HTML i JS razem.
  • Level 23  
    Dżyszla wrote:
    Wykonywanie AJAXa nie pozwala na wykonywanie kodu JS zawartego w odpowiedzi, jeśli w tym leży przyczyna... Trzeba wykonać wtedy polecenie eval, ale to z kolei zadziała tylko w odniesieniu do kodu JS. Raczej trudno jest zwrócić i HTML i JS razem.


    Znalazłem taki opis polecenia eval Link, ale nie bardzo wiem jak go zastosować w moim problemie.

    Zastanawia mnie jak to się dzieje, że podczas wczytywania strony wczytywany jest również program w JS, dodatkowo wrzuciłem go jeszcze do pliku uruchamianego ajax'em (gdy pojawił się mój problem) a mimo to skrypt nie działa. Jak to obejść. Są przecież strony działające na opisanej przeze mnie zasadzie również z wykorzystaniem ajax'a. Przykładem może być np. kalendarz na tej stronie Link Wpisy nie są może wyświetlane za pomocą chmurek, ale i tak wymagany jest do obsługi kalendarza skrypt w JS, a kalendarz obsługiwany jest ajax'em. Może idzie jakoś inaczej obejść mój problem, z zastosowaniem innego rozwiązania (poza otwieraniem strony po kliknięciu)?
  • Level 24  
    Oczywiście jest to możliwe jednakże ciężko zrozumieć z twoich opisów na czym polega problem mógłbyś dać link do strony na pewno ułatwiło by to odnalezienie problemu. Po pierwsze czemu nie dajesz plików skryptów w sekcji HEAD, po drugie dziwnie masz to zrobione że masz w divie kod JS który wypełnia tego DIV'a w całości czymś innym, po trzecie proponowałbym Ci dla przyspieszenia pracy, zwiększenia przejrzystości kodu oraz szybkości jego działania zastosowanie biblioteki JS o nazwie JQuery można do niej dołączyć bibliotekę siostrę JQuery UI która w standardzie daje możliwość wyświetlania okienek, pól formularzy z kalendarzem oraz wiele innych niezwykłych funkcji :D
  • Level 23  
    jan1996 wrote:
    Oczywiście jest to możliwe jednakże ciężko zrozumieć z twoich opisów na czym polega problem mógłbyś dać link do strony na pewno ułatwiło by to odnalezienie problemu. Po pierwsze czemu nie dajesz plików skryptów w sekcji HEAD, po drugie dziwnie masz to zrobione że masz w divie kod JS który wypełnia tego DIV'a w całości czymś innym, po trzecie proponowałbym Ci dla przyspieszenia pracy, zwiększenia przejrzystości kodu oraz szybkości jego działania zastosowanie biblioteki JS o nazwie JQuery można do niej dołączyć bibliotekę siostrę JQuery UI która w standardzie daje możliwość wyświetlania okienek, pól formularzy z kalendarzem oraz wiele innych niezwykłych funkcji :D


    No więc:

    1. Pliki skryptów są w części HEAD. Skrypt zamieszczony w DIV ma za zadanie uruchomić kalendarz przy pierwszym uruchomieniu strony, później tę rolę przejmuje ajax. Można było oczywiście zrobić to samo poleceniem onLoad np. w body, ale już z tego rozwiązania korzystam więc tu zastosowałem takie rozwiązanie.

    2. Co do biblioteki JQuery ... jest to jakiś pomysł, ale wolałbym stworzyć własne rozwiązanie, głównie w celach edukacyjnych. Gotowców jest wiele, ale nic nie zastąpi umiejętności nabytych podczas samodzielnego tworzenia i rozwiązywania zaistniałych problemów. Są jednak problemy, którym mam problem podołać, stąd prośba o pomoc :-)

    3. Przykład kalendarza wrzuciłem na stronę Link - proszę najechać kursorem muszki na dowolny dzień kalendarza (powinna pojawić się duża, czerwona chmurka z dokładną datą pisaną białą czcionką). Gdy jednak przeładuje się stronę za pomocą ajax'a klikając na strzałki <<, >> lub DZIŚ okazuje się, że chmurki formatowane zamieniają się na standardowe chmurki z Windowsa pokazujące kod źródłowy wcześniejszej chmurki. Jedynie ponowne załadowanie strony (nie odświeżenie) pozwala powrócić do poprawnego wyświetlania chmurek.

    P.S. Właśnie zauważyłem, że pod IE nawet przy pierwszym uruchomieniu skrypt nie działa. Nie jest to jednak wina skryptu, ponieważ gdy uruchomimy stronę bezpośrednio Link skrypt działa prawidłowo pod każdą przeglądarką - specjalnie zamieściłem <head> również w tym pliku, żeby pokazać że działa..
  • Helpful post
    Level 24  
    No więc wystarczy zrobić tak :D
    Code: javascript
    Log in, to see the code
    i całość powinna zadziałać :d Swoją drogą w bibliotekach nie chodzi o to żeby popsuć zabawę ale żeby ją skupić na nauce i rozwiązywaniu takich właśnie problemów bez koncentrowania się na banalnych sprawach. Jeszcze jedna rzecz zastanów się nad wysyłaniem danych w innej formie np. JSON i tak całość działa szybko ale tak działałaby jeszcze szybciej(jest to dobry nawyk na przyszłość i bardziej rozbudowane stronki) i nie byłyby dorzucane przy każdym zapytaniu kody JS firmy CBA.PL
  • Level 23  
    jan1996 wrote:
    No więc wystarczy zrobić tak ... i całość powinna zadziałać :d Swoją drogą w bibliotekach nie chodzi o to żeby popsuć zabawę ale żeby ją skupić na nauce i rozwiązywaniu takich właśnie problemów bez koncentrowania się na banalnych sprawach. Jeszcze jedna rzecz zastanów się nad wysyłaniem danych w innej formie np. JSON i tak całość działa szybko ale tak działałaby jeszcze szybciej(jest to dobry nawyk na przyszłość i bardziej rozbudowane stronki) i nie byłyby dorzucane przy każdym zapytaniu kody JS firmy CBA.PL


    Wielkie dzięki ... takiej dupereli mi brakowało :( aż wstyd że na to nie wpadłem...
    Dzięki wielkie, podziękowania w drodze.
    Powiedz mi jeszcze o co dokładnie chodzi z JSON. Próbowałem zastosować zamiast POST, ale chyba nie o to chodzi, a strony które znalazłem trochę mało precyzyjnie opisują tą metodę. Znasz może jakąś stronę z przykładem zastosowania tego rozwiązania do przekazania zmiennych?
  • Level 24  
    POST to metoda protokołu HTTP, a JSON to sposób zapisywania zmiennych w formie tekstowej. Wbrew pozorom nie musisz za dużo zmieniać w PHP tworzysz tablicę zamieniasz ją na JSON metodą Link poprzez JS normalnie odbierasz i dekodujesz na zmienną poprzez
    Code: javascript
    Log in, to see the code
    i już :D