Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [ajax] Jak zrobic aby po kliknieciu w link pod spodem pojawila sie tresc danego div-a lub strony html
Forum PHP.pl > Forum > Przedszkole
jaskooo
23.06.2007, 08:08:27
Witam wszystkich.
Czarna dziura.

Sprawa wygląda tak:

Chciałbym aby po kliknięciu w link pod spodem wyświetlała sie zawartość odpowiedniego do linka DIV-a lub strony HTML, bez przeładowywania strony.

Wiem, ze to jest podstawa Ajax-a i mógłbym przekopiować gotowy skrypt, ale chciałbym sie nauczyć jak to działa.


Strona wyglada nastepujaco:

galeria.php

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. 	<link rel="stylesheet" type="text/css" href="style.css" />
  7. 	<title>Galeria</title>
  8.  
  9.  
  10. </head>
  11. <body>
  12. <div id="main">
  13.  
  14. <div>
  15. 	<li><a href="pierwsza.php">Pierwsza</a></li>
  16.  	<li>href="drugie.php">Druga</a></li>
  17. </div>
  18.  
  19.  
  20.  
  21. </div>
  22.  
  23. </body>
  24. </html>
[HTML] pobierz, plaintext



pierwsza.php
[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. <head></head>
  4.  
  5. <body>
  6. <?php
  7.  
  8. $dir_arr = scandir('pierwsza/');
  9. array_shift($dir_arr);
  10. array_shift($dir_arr);
  11. array_shift($dir_arr);
  12. foreach($dir_arr as $file)
  13.     {
  14.  
  15.  		echo "<a href=\"\" onclick=\"window.open('zdjecia/$file', '$file','menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no')\"><img style='width: 100px;' src=\"zdjecia/$file\"></img></a>";
  16.  
  17.  
  18.  }	
  19.  
  20.  
  21.  
  22.  
  23. ?>
  24. </body>
  25. </html>
[HTML] pobierz, plaintext


druga.php
[HTML] pobierz, plaintext 
  1. <?php
  2.  
  3. $dir_arr = scandir('druga/');
  4. array_shift($dir_arr);
  5. array_shift($dir_arr);
  6. array_shift($dir_arr);
  7. foreach($dir_arr as $file)
  8.     {
  9.  
  10.  		echo "<a href=\"\" onclick=\"window.open('zdjecia/$file', '$file','menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no, width=".$szer.", height=".$wys."')\"><img style='width: 100px;' src=\"zdjecia/$file\"></img></a>\n";
  11.  
  12.  }	
  13.  
  14.  
  15.  
  16.  
  17. ?>
[HTML] pobierz, plaintext




Proszę o pomoc exclamation.gif!!


Z gory dziekuje smile.gif
nexis
23.06.2007, 08:59:37
advAJAX
jaskooo
23.06.2007, 11:19:12
Wiem, mam.

Poprostu nie mam pomyslu jak to wykonac. Zdarza sie czasami, ze szukam rozwiazania, a pozniej okazuje sie, ze szukalem za bardzo skomplkowanego.

W tym przypadku pewnie tez tak bedzie.


Prosze o podpoiwiedz?
abc667
23.06.2007, 11:57:28
wywołujesz ajaxa z urlem swoim np drugie.php, ustawiasz mime na text w parametrach a potem w onsucess wrzucasz responsetext do diva, kod masz w przykładach advajax potrzebny tutaj
jaskooo
23.06.2007, 12:05:59
Strasznie sie czuje zarzenowany, ale nie moge tego zaimplementowac.

Zrobiilem to bez Ajax-a, ale na dzien dobry sa wlaczone dwie galeria, a ja chce aby wyswietlana byla albo jedna, alb druga:



kod wyglada tak:


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. 	<link rel="stylesheet" type="text/css" href="style.css" />
  7. 	<title>Galeria</title>
  8. <script type="text/javascript" language="javascript">
  9. // <![CDATA[
  10.  function showHide(id) {
  11.  
  12.             obj = document.getElementById(id);
  13.             obj.style.display = (obj.style.display == "block" ? "none" : "block");
  14.         }
  15.  
  16. // ]]>
  17. </script>
  18.  
  19. </head>
  20. <body>
  21. <div id="main">
  22.  
  23. <div>
  24. 	<li><a href="java script:showHide('1')">Pierwsza</a></li>
  25.  	<li><a href="java script:showHide('2')">Druga</a></li>
  26. </div>
  27.  
  28.  
  29. <div style="display: block;" id="1">
  30.  
  31. <?php
  32.  
  33.  
  34. $dir_arr = scandir('pierwsza/');
  35. array_shift($dir_arr);
  36. array_shift($dir_arr);
  37. array_shift($dir_arr);
  38. foreach($dir_arr as $file)
  39.     {
  40.  
  41.  		echo "<a href=\"\" onclick=\"window.open('pierwsza/$file', '$file','menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no')\"><img style='width: 100px;' src=\"pierwsza/$file\"></img></a>";
  42.  
  43.  
  44.  }	
  45.  
  46.  
  47.  
  48.  
  49. ?>
  50.  
  51. </div>
  52.  
  53.  
  54. <div style="display: block;" id="2">
  55.  
  56. <?php
  57.  
  58.  
  59. $dir_arr = scandir('druga/');
  60. array_shift($dir1_arr);
  61. array_shift($dir1_arr);
  62. array_shift($dir1_arr);
  63. foreach($dir_arr as $file)
  64.     {
  65.  		echo "<a href=\"\" onclick=\"window.open('druga/$file', '$file','menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no')\"><img style='width: 100px;' src=\"druga/$file\"></img></a>";
  66. 	}	
  67.  
  68.  
  69.  
  70.  
  71. ?>
  72.  
  73. </div>
  74.  
  75.  
  76. </div>
  77.  
  78. </body>
  79. </html>
[HTML] pobierz, plaintext



Jak mam wywolac ta ajaxowa funkcje poprzez klikniecie. Wiem ze to zenujace ale mam jakas dziure w mozgu.

Please help!



czy ptrzypadkiem tak:

[HTML] pobierz, plaintext 
  1. <a href="#" onclick="function('1')"></a>
[HTML] pobierz, plaintext



questionmark.gifquestionmark.gif




Tak nie dziala:

galeria.php
[HTML] pobierz, plaintext 
  1. ]
  2.  advAJAX.get({
  3.     url: "pierwsza.php",
  4.     onInitialization : function() {
  5.         /* Ukrycie warstwy */
  6.         someDiv.style.visibility = "hidden";
  7.     },
  8.     onSuccess : function(obj) {
  9.         /* Ustawienie nowej, pobranej z serwera wartości */
  10.         someDiv.innerHTML = obj.responseText;
  11.     },
  12.     onError : function(obj) {
  13.         /* W przypadku wystąpienia błędu wyświetlenie komunikatu */
  14.         alert("Error: " + obj.status);
  15.     },
  16.     onFinalization : function() {
  17.         /* Ponowne pokazanie warstwy po zakończeniu wszystkich operacji */
  18.         someDiv.style.visibility = "visible";
  19.     }
  20. });       
  21. // ]]>
  22. </script>
  23.  
  24. </head>
  25. <body>
  26. <div id="main">
  27.  
  28. <div>
  29. 	<li><a href="" onclick='function('1')'>Pierwsza</a></li>
  30.  	<li><a href="" onclick='function('2')'>Druga</a></li>
  31. </div>
  32. [/html
  33.  
  34. pierwsza.php
  35.  
  36. [html]
  37. <div style="visibility: visible"id="1">
  38.  
  39. <?php
  40.  
  41.  
  42. $dir_arr = scandir('pierwsza/');
  43. array_shift($dir_arr);
  44. array_shift($dir_arr);
  45. array_shift($dir_arr);
  46. foreach($dir_arr as $file)
  47.     {
  48.  
  49.  		echo "<a href=\"\" onclick=\"window.open('pierwsza/$file', '$file','menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no')\"><img style='width: 100px;' src=\"pierwsza/$file\"></img></a>";
  50.  
  51.  
  52.  }	
  53.  
  54.  
  55.  
  56.  
  57. ?>
  58.  
  59. </div>
[HTML] pobierz, plaintext
abc667
23.06.2007, 12:16:17 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>...</title>
  5. <script type="text/javascript" src="advajax.js"></script>
  6. <script type="text/javascript">
  7.  
  8. function dd(plik)
  9. {
  10. advAJAX.get({
  11.     url : plik,
  12. 	mimeType: 'text/html', 
  13.     onSuccess : function(obj) { document.getElementById("cnt").innerHTML = obj.responseText; }
  14. });
  15.  
  16. }
  17.  
  18.  
  19. </script>
  20. </head>
  21. <body>
  22.  
  23. <div id="cnt">
  24.  
  25. </div>
  26. <a href="#" onclick="dd('plik.php'); return false;">pobierz</a>
  27. </body>
  28. </html>
[HTML] pobierz, plaintext

ok, masz to co napisałem w poście wcześniej
Kamson
23.06.2007, 12:21:30
gdzie pliki z galeriami to galeria1,galeria2 ....galeria%i ... 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. 	<link rel="stylesheet" type="text/css" href="style.css" />
  6.  
  7. 	<script type="text/javascript" src="advajax.js"></script>
  8. 	<script type="text/javascript" language="javascript">
  9. 	// <![CDATA[
  10.  
  11. 		function openGalery(nr) {
  12.  
  13. 			  advAJAX.get({
  14.  
  15. 				url: "galeria"+nr+".php",
  16. 				tag: "galery_div",
  17. 				timeout: 9000,
  18.  
  19. 				onTimeout : function(){
  20. 					alert('Uplynal czas zadania, spróbuj ponownie!');
  21. 				},
  22.  
  23. 				onLoading : function(obj) { 
  24. 					document.getElementById("galery_div").innerHTML = "Ładuję....";
  25. 				},
  26.  
  27. 				onSuccess : function(obj) {					
  28. 					document.getElementById("galery_div").innerHTML = obj.responseText;						  		  			  
  29. 				},
  30.  
  31. 				onError : function(obj) {
  32. 					alert('Wystąpił błąd!')
  33. 				}
  34.  
  35. 			  });		
  36. 		}
  37.  
  38. 	// ]]>
  39. 	</script>
  40. 	<title>Galeria</title>
  41. </head>
  42. <body>
  43. <div id="main">
  44.   <ul>
  45. 		<li><a href="java script:openGalery('1')">Pierwsza</a></li>
  46. 		<li><a href="java script:openGalery('2')">Druga</a></li>
  47.   </ul>
  48.   <div id="galery_div"></div>
  49. </div>
  50. </body>
  51. </html>
[HTML] pobierz, plaintext
jaskooo
23.06.2007, 12:46:53
Chlopaki tak jak mowilem - to proste tylko kopa trzeba.

Wszystko dziala exclamation.gif!!

Juz moge dzialac z Ajax-em

Ja tak mam wystarczy mi podpowiedziec schemat i lece!!!



Wielkie dzieki
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.