Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Odświeżanie diva po kliknięciu checkboxa
Forum PHP.pl > Forum > XML, AJAX
northwest
12.03.2010, 03:28:47
Witam serdecznie,
Chciałbym zrobić na stronce odświerzanie DIVa po kliknięciu na
checkboxa. Kombinowałem z czymś takim (z jQuery):
[PHP] pobierz, plaintext 
  1. <script>
  2. function odswiez_diva(){
  3. $.post('tresc_do_divka.php',{pokaz:'divek'},function(odebrane_dane){
  4. $('#divek').html(odebrane_dane)
  5. })
  6. }
  7.  
  8. </script>
  9. <form action = "ja.html" method="post"
  10. <input type="checkbox" name="pobranie2" />
  11. </form>
  12.  
  13. <div id='divek'>
  14. Po zaznaczeniu/odznaczeniu ten divek ma się odświerzyć
  15. </div>
[PHP] pobierz, plaintext

ale nie bardzo wiem jak to połączyć ze sobą sad.gif wie ktoś może jak to zrobić?

Northwest
masahuku
12.03.2010, 03:36:44
Let the force of onclick be with You ! smile.gif. Realizujesz to albo za pomocą handlerów eventów w jquery $(twoj_checkbox).onclick(function() { }) albo mniej "pr0" za pomocą onclick w tagu checkboxa.
northwest
12.03.2010, 08:54:05
tylko ja bym chciał (jeśli się da) żeby po odznaczeniu/zaznaczeniu automatycznie się ten div przeładowywał...
bez wciskania buttona... da się coś takiego zrobic?

przepraszam jeśli to głupie pytanie, ale dopiero raczkuje z ajaxem winksmiley.jpg
masahuku
12.03.2010, 17:43:01
No ale dajesz onclicka na checkboxie a nie na onSubmit smile.gif. Event sie odpali po kliknięciu danego inputa.
Dox_
9.04.2012, 12:34:19
Dla poszukiwaczy konkretnego rozwiązania oto ono:

Zawartość nagłówka:
[JAVASCRIPT] pobierz, plaintext 
  1. /*
  2. Skrypt stworzony przez Dox_'a. Można go rozpowszechniać wg licencji Free Use z zachowaniem informacji o autorze.
  3. */
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
  6. <script type="text/javascript">
  7. /* Blok kodu w ktorym wypisana jest dowolna ilość sentencji */
  8. motto = new Array ();
  9. motto[0] = "Pierwszy prezent";
  10. motto[1] = "Drugi prezent";
  11. motto[2] = "Trzeci prezent";
  12. motto[3] = "Czwarty prezent";
  13.  
  14. function show() //funkcji odpowiedzialna za pokazanie wylosowanej sentencji
  15. {
  16. 	tekst = ""; // przypisanie busatej wartości do zmiennej tekst - zbędne ;)
  17. 	losowanie = Math.floor(Math.random()*6); //losowanie
  18.     if (losowanie > 3){
  19.     tekst = "Niestety, nic nie wylosowałeś(aś). Spróbój jeszcze raz.";
  20.     }
  21.     else {
  22.     tekst = motto[losowanie]; // wylosowana treść
  23.     }
  24. 	return (tekst); // wyświetlenie treści
  25. }
  26.  
  27. function refresh() // funkcja odpowiedzialna za "czyszczenie zawartości" (tak na prawdę wartość jest na nowo losowana i podmienia starą) 
  28. {
  29. 	document.getElementById("mypopup").style.display="none"; //wyłączenie diva głównego
  30. 	document.getElementById("popupbody").innerHTML=show(); //podmiana zawartości diva ze zmienną treścią
  31. 	document.getElementById("mypopup").style.display="block"; /*wyświetlenie diva głównego; pierwsza i 3 linijka może być zbędna ale mi się nie chciało tego sprawdzać */
  32. }
  33.  
  34. </script>
  35. </head>
[JAVASCRIPT] pobierz, plaintext


Budowa diva i przycisków:

[HTML] pobierz, plaintext 
  1. /*
  2. Skrypt stworzony przez Dox_'a. Można go rozpowszechniać wg licencji Free Use z zachowaniem informacji o autorze.
  3. */
  4. <input type="image" onClick='document.getElementById("mypopup").style.display="block"' src='http://images21.fotosik.pl/150/aaefd286df6a29e8.png' /> /* przycisk jako jajko wielkanocne - drobne nawiązanie do świat ;)*/
  5.  
  6. /* Div główny od razu z drobnymi modyfikacjami stylu */
  7. <div id='mypopup' name='mypopup' style='position: absolute; width: 190px; height: 400px; display: none;'>
  8. 	<div  style="font-size:100%; margin:10px auto; padding:8px; border:1px solid #006CB0; border-radius:15px; background-color: rgba(125,125,125,0.2); height: 40px;">
  9. 	<b><center>Wielkanocna niezpodzianka</center></b>
  10. 	</div> // div nagłówka - można go usunąć bądź zmienić zawartość
  11. 	<div id='popupbody' style="font-size:90%; margin:10px auto; padding:8px; border:1px solid #006CB0; border-radius:5px; background-color: rgba(125,125,125,0.2);"> // div naszego ciała ze zmienną treścią o id popupbody
  12. 		<script type="text/javascript"> document.write(show());</script> // pierwsze wypisanie wylosowanego motta
  13. 	</div>
  14. 	<div style="position: absolute; right: 2px; top:2px">
  15. 		<input type="image" onClick='document.getElementById("mypopup").style.display="none"' src='http://oferta.miastoszkolen.pl/cennik_x.png' />
  16. 	</div> // div z przyciskiem zamykającym głównego diva
  17. 	<div style="position: absolute; left: 2px; top:2px">
  18. 		<input type='image' onClick='refresh()' src='http://www.sscont.x10hosting.com/xfactor/Themes/default/images/sp/refresh.png' />
  19. 	</div> // div z przyciskiem odświeżającym diva ze zmienną treścią
  20. </div>
[HTML] pobierz, plaintext


Przykładowy plik html

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
  4. <script type="text/javascript">
  5. /*
  6. Skrypt stworzony przez Dox_'a. Można go rozpowszechniać wg licencji Free Use z zachowaniem informacji o autorze.
  7. */
  8. /* Blok kodu w ktorym wypisana jest dowolna ilosc sentencji */
  9. motto = new Array ();
  10. motto[0] = "Pierwszy prezent";
  11. motto[1] = "Drugi prezent";
  12. motto[2] = "Trzeci prezent";
  13. motto[3] = "Czwarty prezent";
  14.  
  15. function show()
  16. {
  17. 	tekst = "";
  18. 	losowanie = Math.floor(Math.random()*6);
  19.     if (losowanie > 3){
  20.     tekst = "Niestety, nic nie wylosowałeś(aś). Spróbój jeszcze raz.";
  21.     }
  22.     else {
  23.     tekst = motto[losowanie];
  24.     }
  25. 	return (tekst);
  26. }
  27.  
  28. function refresh()
  29. {
  30. 	document.getElementById("mypopup").style.display="none";
  31. 	document.getElementById("popupbody").innerHTML=show();
  32. 	document.getElementById("mypopup").style.display="block";
  33. }
  34.  
  35. </script>
  36. </head>
  37. <body>
  38.  
  39. /*
  40. Skrypt stworzony przez Dox_'a. Można go rozpowszechniać wg licencji Free Use z zachowaniem informacji o autorze.
  41. */
  42.  
  43. <input type="image" onClick='document.getElementById("mypopup").style.display="block"' src='http://images21.fotosik.pl/150/aaefd286df6a29e8.png' />
  44.  
  45.  
  46. <div id='mypopup' name='mypopup' style='position: absolute; width: 190px; height: 400px; display: none;'>
  47. 	<div  style="font-size:100%; margin:10px auto; padding:8px; border:1px solid #006CB0; border-radius:15px; background-color: rgba(125,125,125,0.2); height: 40px;">
  48. 	<b><center>Wielkanocna niezpodzianka</center></b>
  49. 	</div>
  50. 	<div id='popupbody' style="font-size:90%; margin:10px auto; padding:8px; border:1px solid #006CB0; border-radius:5px; background-color: rgba(125,125,125,0.2);">
  51. 		<script type="text/javascript"> document.write(show());	</script>
  52. 	</div>
  53. 	<div style="position: absolute; right: 2px; top:2px">
  54. 		<input type="image" onClick='document.getElementById("mypopup").style.display="none"' src='http://oferta.miastoszkolen.pl/cennik_x.png' />
  55. 	</div>
  56. 	<div style="position: absolute; left: 2px; top:2px">
  57. 		<input type='image' onClick='refresh()' src='http://www.sscont.x10hosting.com/xfactor/Themes/default/images/sp/refresh.png' />
  58. 	</div>
  59. </div>
  60.  
  61. </body>
  62. </html>
[HTML] pobierz, plaintext


Oczywiście położenie divów oraz przycisków można dowolnie ustawić. Skrypt również posiada parę drobiazgów, które dla innych mogą być zbędne. Dodatkowo to rozwiązanie wykorzystuje wyłącznie JS, czego pewnie szukał kolega oraz sporo innych osób w internecie, korzystając z tego samego skryptu, popularnego na innych forach w działach dotyczących pytań wink.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.