Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [advAJAX] onInitialization - problem
Forum PHP.pl > Forum > XML, AJAX > AJAX
dyktek
24.04.2006, 14:36:17
Witam, startuje dopiero z ajaxem i na początku trafiłem na taki problem, chciałem napisać sobie kod do mojej galerii zdjęć tak aby ładować fotki bez przeładowanania strony no i kodzik wygląda tak:

[HTML] pobierz, plaintext 
  1. <head>
  2. <script language="JavaScript" type="text/javascript" src="advajax.js"></script>
  3. </head>
  4. <body xml:lang="pl" lang="pl">
  5.  
  6.  
  7. <script type="text/javascript">
  8.  
  9. function klik(adres){
  10.  
  11. alert(adres);
  12.  
  13. advAJAX.get({
  14.     url: "test.php?foto="+adres,
  15.     onInitialization : function() {
  16.      
  17.         document.getElementById('te').innerHTML = '<div style="border:1px solid #cacaca;">trwa ladowanie...</div>';
  18.     },
  19.     onSuccess : function(obj) {
  20.       
  21.          document.getElementById('te').innerHTML = obj.responseText;
  22.                     
  23.     },
  24.     onError : function(obj) {
  25.        
  26.         document.getElementById('te').innerHTML = '<div style="border:1px solid red; background-color: #cacaca;">nie moze zaladowac strony</div>';
  27.     },
  28.     onFinalization : function() {
  29.       
  30.         document.getElementById('te').style.visibility = "visible";
  31.     }
  32. });
  33.  
  34. }
  35.  
  36. </script>
  37.  
  38.  
  39. <input type="text" name="adres" id="adres" onBlur="klik(this.value);"></div><br /><br />
  40.  
  41.  
  42. <div id="te" name="te">tralalala</div>
  43.  
  44. </html>
[HTML] pobierz, plaintext


i plik test.php

[PHP] pobierz, plaintext 
  1.  
  2. <?php
  3.  
  4. $foto = $_GET['foto'];
  5.  
  6. $dir = 'sciezka';
  7.  
  8.  
  9. echo'<img src="'.$dir.'" />';
  10.  
  11. ?>
[PHP] pobierz, plaintext


i wszystko działa ok w pole formularza wpisuje sobie nazwe zdjecia i zdjecie jesli istnieje jest ładowane, ale chciałem uzyskać efekt taki że podczas gdy zdjecie się ładuje wstawiało mi tego diva z informacją o tym że fota jest w trakcie ładowania a tak się nie dzieje, div z infem o tym ze fotka sie laduje pojawia sie i znika po czym fotka laduje sie normalnie tak jakbym wklepal po prostu adres
TomASS
24.04.2006, 21:19:02
To jest tak:
Masz jednego diva:
[HTML] pobierz, plaintext 
  1. <input type="text" name="adres" id="adres" onBlur="klik(this.value);"></div><br /><br />
  2. <div id="te" name="te">tralalala</div>
  3. </html>
[HTML] pobierz, plaintext

I teraz onInitialization wstawiasz do niego kolejnego diva:
[HTML] pobierz, plaintext 
  1. onInitialization : function() {
  2.     
  3.        document.getElementById('te').innerHTML = '<div style="border:1px solid #cacaca;">trwa ladowanie...</div>';
  4.    },
[HTML] pobierz, plaintext

z napisem 'trwa ladwoanie...'. InnerHTML czyści przy tym to co było poprzednio w tym divie. Czyli teraz masz diva w divie smile.gif

Dalej wypełniasz tego diva
Cytat
document.getElementById('te').innerHTML = obj.responseText;
kasując przy tym to co było poprzednio czyli 'diva w divie'.

Rozumiesz?

Czyli pownieneś mieć:

1. Ukrytego diva 'Loading'
2. onInitialization: loading_div.style.visibility = "visible";
3. Ładowannie zdjecia ale do innego diva
4. Ukrycie loading_div
dyktek
25.04.2006, 13:29:23
zrobilem tak
[HTML] pobierz, plaintext 
  1. function klik(adres){
  2.  
  3. advAJAX.get({
  4.     url: "test.php?foto="+adres,
  5.     onInitialization : function() {
  6.       
  7.             document.getElementById('cont_foto').innerHTML = '';
  8.      
  9.         document.getElementById('laduj').style.display = 'block';
  10.  
  11.     },
  12.     onSuccess : function(obj) {
  13.       
  14.       
  15.         document.getElementById('cont_foto').innerHTML = obj.responseText;
  16.             
  17.                     
  18.     },
  19.     onError : function(obj) {
  20.        
  21.         document.getElementById('te').innerHTML = '<div style="border:1px solid red; background-color: #cacaca;">nie moze zaladowac strony...</div>';
  22.     },
  23.     onFinalization : function() {
  24.       
  25.         document.getElementById('laduj').style.display = 'none';
  26.     }
  27. });
  28.  
  29. }
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. <div id="laduj" name="laduj" style="border: 1px solid lightblue; width:300px; height:200px; font:Arial; font-size:17px; color:blue; display: none;"><br /><br /><br /><br />trwa ladowanie...</div>
  2. <div id="cont_foto" name="cont_foto"></div>
[HTML] pobierz, plaintext 



[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3.  
  4. $foto = $_GET['foto'];
  5.  
  6.  
  7. $dir = 'src';
  8.  
  9.  
  10. if(file_exists($dir)){
  11.  
  12. echo'<img src="'.$dir.'" />';
  13.  
  14. }
  15. else{
  16.  
  17. echo'brak';
  18.  
  19.  
  20. }
  21.  
  22. ?>
[PHP] pobierz, plaintext


i niestety nadal te zdjecia się tak ładują
ARJ
25.04.2006, 15:59:24
a próbowałeś coś w tym stylu:
Kod
onLoading : function(obj) {
  document.getElementById('laduj').style.visibility = "block";
},
  onLoaded : function(obj) {
  document.getElementById('laduj').style.visibility = "hidden";
},
dyktek
26.04.2006, 10:08:34
niestety nie pomogło wynik działania można zobaczyć tutaj KLIK
choć wydaje mi się że problem polega na tym że plik test.php zwraca kod

[HTML] pobierz, plaintext 
  1. <img src="$dir" />
[HTML] pobierz, plaintext


więc teoretycznie już jest wynik który jest kodem dla zdjęcia, który jest wstawiany na strone, i nie wiem czy metoda onLoading czeka na zdjęcie czy gdy tylko dostanie kod juz je go przekazuje jako załadowaną treść
kwiateusz
26.04.2006, 18:48:26
hmm mi ta strona dziala .. jak klikam dalej to pisze prosze czekac i laduje sie zdjecie... wiec co jest nie tak ?
dyktek
26.04.2006, 20:35:29
u mnie jak wyczyszczę cache przeglądarki mozilla, ie, opera zdjęcia wczytują się stopniowo, z takim tempem jak zdjęcie ładowane z bezpośredniego url-a
TomASS
26.04.2006, 22:41:55
Mi też wszystko chula i piszczy tongue.gif
Pod IE FF i Operą smile.gif
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.