Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Odświeżanie diva po kliknięciu checkboxa
northwest
post
Post #1





Grupa: Zarejestrowani
Postów: 788
Pomógł: 1
Dołączył: 17.09.2004

Ostrzeżenie: (10%)
X----

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ą (IMG:style_emoticons/default/sad.gif) wie ktoś może jak to zrobić?

Northwest
Go to the top of the page
+Quote Post
masahuku
post
Post #2





Grupa: Zarejestrowani
Postów: 42
Pomógł: 4
Dołączył: 11.12.2009

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

Let the force of onclick be with You ! (IMG:style_emoticons/default/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.
Go to the top of the page
+Quote Post
northwest
post
Post #3





Grupa: Zarejestrowani
Postów: 788
Pomógł: 1
Dołączył: 17.09.2004

Ostrzeżenie: (10%)
X----

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 (IMG:style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
masahuku
post
Post #4





Grupa: Zarejestrowani
Postów: 42
Pomógł: 4
Dołączył: 11.12.2009

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

No ale dajesz onclicka na checkboxie a nie na onSubmit (IMG:style_emoticons/default/smile.gif) . Event sie odpali po kliknięciu danego inputa.
Go to the top of the page
+Quote Post
Dox_
post
Post #5





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 9.04.2012

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

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ń (IMG:style_emoticons/default/wink.gif)

Ten post edytował Dox_ 9.04.2012, 12:39:14
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 14.09.2025 - 18:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn