Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [advAJAX] onInitialization - problem
dyktek
post 24.04.2006, 14:36:17
Post #1





Grupa: Zarejestrowani
Postów: 240
Pomógł: 0
Dołączył: 18.01.2004
Skąd: rzeszów / kraków

Ostrzeżenie: (0%)
-----

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

Ten post edytował dyktek 24.04.2006, 14:50:40
Go to the top of the page
+Quote Post
TomASS
post 24.04.2006, 21:19:02
Post #2





Grupa: Zarejestrowani
Postów: 1 660
Pomógł: 13
Dołączył: 9.06.2004
Skąd: Wrocław i okolice

Ostrzeżenie: (0%)
-----

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


--------------------
www.fajrant.pl/
Go to the top of the page
+Quote Post
dyktek
post 25.04.2006, 13:29:23
Post #3





Grupa: Zarejestrowani
Postów: 240
Pomógł: 0
Dołączył: 18.01.2004
Skąd: rzeszów / kraków

Ostrzeżenie: (0%)
-----

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ą
Go to the top of the page
+Quote Post
ARJ
post 25.04.2006, 15:59:24
Post #4





Grupa: Zarejestrowani
Postów: 453
Pomógł: 22
Dołączył: 20.09.2004
Skąd: Kraków - NH -

Ostrzeżenie: (0%)
-----

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";
},


--------------------
Warsztat: Windows 7 Pro 64bit | Apache 2.2 | PHP 5.2 | MySQL 5.0 | PHPmyadmin 2.6.4
Go to the top of the page
+Quote Post
dyktek
post 26.04.2006, 10:08:34
Post #5





Grupa: Zarejestrowani
Postów: 240
Pomógł: 0
Dołączył: 18.01.2004
Skąd: rzeszów / kraków

Ostrzeżenie: (0%)
-----

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ść
Go to the top of the page
+Quote Post
kwiateusz
post 26.04.2006, 18:48:26
Post #6


Admin Techniczny


Grupa: Administratorzy
Postów: 2 071
Pomógł: 93
Dołączył: 5.07.2005
Skąd: Olsztyn
hmm mi ta strona dziala .. jak klikam dalej to pisze prosze czekac i laduje sie zdjecie... wiec co jest nie tak ?
Go to the top of the page
+Quote Post
dyktek
post 26.04.2006, 20:35:29
Post #7





Grupa: Zarejestrowani
Postów: 240
Pomógł: 0
Dołączył: 18.01.2004
Skąd: rzeszów / kraków

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
TomASS
post 26.04.2006, 22:41:55
Post #8





Grupa: Zarejestrowani
Postów: 1 660
Pomógł: 13
Dołączył: 9.06.2004
Skąd: Wrocław i okolice

Ostrzeżenie: (0%)
-----

Mi też wszystko chula i piszczy tongue.gif
Pod IE FF i Operą smile.gif


--------------------
www.fajrant.pl/
Go to the top of the page
+Quote Post
« Następny starszy · AJAX · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.04.2024 - 23:42
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn