Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ikona ładowania
Forum PHP.pl > Forum > XML, AJAX > AJAX
brwCode
Witam, posiadam oto taki kawałek kodu który będę chciał użyć na swojej stronie. Odpowiada on za wczytywanie treści w formie AJAX do danego diva.

Demo: http://gospeak.pl/AJAX/

Chciałbym do tego kodu dodać ikonę "ładowania" , w czasie którym wczytuje się treść do zmiany wyświetla się ta ikonka ładowania.
Z racji tego że z tym językiem stykam się pierwszy raz nie wiem jak to zrobić.

Także szukam czegoś takiego że jak wyślę komuś link http://gospeak.pl/AJAX/#1 to wyświetli mu się zawartość pliku "Wczytaj tekst numer 1" a nie strona główna.

  1. // pierwsza część kodu var ObiektXMLHttp = false;
  2. if (window.XMLHttpRequest)
  3. {
  4. ObiektXMLHttp = new XMLHttpRequest(); }
  5. else if (window.ActiveXObject)
  6. {
  7. ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  8.  
  9. // druga część kodu
  10. function getData(zrodlo, cel) {
  11. if(ObiektXMLHttp)
  12. {
  13. var cel = document.getElementById(cel);
  14. ObiektXMLHttp.open("GET", zrodlo);
  15.  
  16. ObiektXMLHttp.onreadystatechange = function()
  17. {
  18. if (ObiektXMLHttp.readyState == 4)
  19. {
  20. cel.innerHTML = ObiektXMLHttp.responseText;
  21. }
  22. }
  23. // trzecia część kodu
  24. ObiektXMLHttp.send(null); } }
kamil4u
1. Przed wywołaniem AJAX-a dajesz ikonkę ładowania, następnie po zakończeniu( .readyState == 4 ) usuwasz tę ikonkę
2. Wywołujesz zdarzenie onload/załadowania DOM i w nim sprawdzasz jak wygląda hash - to co jest po #( w JS da się to sprawdzić ). Następnie sprawdzasz odpowiednio zawartość tego hash-a i jak trzeba to wykonujesz żądanie do serwera(, czyli uruchamiasz skrypt AJAX )

3. Tak dodatkowo możesz przejrzeć to: http://forum.php.pl/index.php?showtopic=182921
4. Nie polecam opierać całej strony na AJAX
brwCode
Jestem świeżakiem w AJAX ale próbowałem tym kodem:

  1. ObiektXMLHttp.onreadystatechange = function() {
  2. if (XMLHttp.readyState == (1 || 0)) {
  3. document.getElementById('loading').innerHTML = "Ładowanie..."; }
  4.  
  5. if (XMLHttp.readyState == 4) {
  6. document.getElementById('loading').innerHTML = "";
  7. document.getElementById(cel).innerHTML = XMLHttp.responseText; }
  8.  
  9. if (XMLHttp.readyState != (1 || 0 || 4)) { document.getElementById('loading').innerHTML = "" } }

Ale nic nie wskórałem.


Tak na marginesie to chcę zrobić coś jak jest na FiberHost, bo tak samo jak oni do zmiany mam tylko centralną część strony (look)

Może lepiej użyć do tego jQuery?
kamil4u
Na pewno będzie Ci łatwiej.

Cytat
XMLHttp.readyState == (1 || 0)

Co to za zapis? Nie można stosować takich skrótów.

Poszukaj w necie to dostaniesz gotowca, bo wiele osób chciało mieć tak jak Ty smile.gif
brwCode
Zadaje drugie pytania bo moderator zamknął mój nowy tema, a więc:

Posiadam na stronie bibliotekę jQuery (http://code.jquery.com/jquery-latest.js).
Dzięki niej wczytuje pliki .html do danego diva formą
Kod
onClick="$('#news').load('podstrony/newsy.html')


I to wszystko, ale chciałbym dodać do tego jeszcze ikonę ładowania - w czasie którym wczytuje się treść do zmiany wyświetla się ta ikonka ładowania a po wczytaniu znika.

Wiem że jest to krótki kod do takiego "loadera" ale nie mogę nigdzie znaleźć.
kamil4u
robisz tak samo jak Ci pisałem wcześniej - niczym się to nie różni. Do "zniknięcia" ładowania używasz zdarzenia success
brwCode
Nie mogę sobie z tym poradzić, szukam gotowca a na google nie mogę znaleźć.
kamil4u
No ja za Ciebie robić nie będę. Mogę Ci jedynie pomóc. Jak tego oczekujesz to pokaż jak próbowałeś, jeśli liczysz tylko na gotowca to czekaj aż odpisze Ci ktoś inny.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.