Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Tworzenie ciasteczek
Forum PHP.pl > Forum > Przedszkole
piernik123
2.04.2011, 11:15:55
Witam. Chciałbym wiedzieć, czy jest możliwość aby do poniższego kodu opierającego się na zasadzie pokaż/ukryj byłaby jakaś możliwość doczepienia ciasteczek, które umożliwią po odświeżeniu czy nawet wyłączeniu strony zapamiętanie ostatniego wyboru podczas ponownego korzystania z niej. 
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.nazwa p { display: none; }
  7. div.nazwa p1 { display: inline; }
  8. </style>
  9.  
  10. <script language="javascript" type="text/javascript">
  11. <!--
  12. function nazwa(element) {
  13. i = 0;
  14. while (e = document.getElementById("m" + i++)) {
  15.    e.style.display = "none";
  16. }
  17. document.getElementById(element).style.display = "inline";
  18. }
  19. menu('m0');
  20. // -->
  21. </script>
  22.  
  23.       </head>
  24.  
  25.       <body>
  26.  
  27. <div class="nazwa">
  28. <p id="m0">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  29. <p1 id="m1">
  30. Tekst1 po kliknięciu w odnośnik "tekst 1"
  31. </p1>
  32. </div>
  33.  
  34. <a href="#" onclick="nazwa('m0'); return n;">tekst1</a>
  35. <a href="#" onclick="nazwa('m1'); return false;">tekst2</a>
  36.  
  37.  
  38.       </body>      </html>
[HTML] pobierz, plaintext

Zapytam też czy jest jakaś możliwość uzyskania tego efektu bez korzystania z ciasteczek? Jest to dla mnie bardzo skomplikowane, a poza tym nie wszystkie przeglądarki obsługują cookies.
Proszę o pomoc. Pozdrawiam.
kamil4u
2.04.2011, 13:24:29
Cytat
poza tym nie wszystkie przeglądarki obsługują cookies

Które? Chyba, że użytkownik sam zrezygnuje, ale to inna bajka smile.gif

Ciasteczka może i wydają się trudne/skomplikoawne, ale takie nie są. Polecam małą pomoc naukową: http://blog.kukawski.pl/2007/02/26/js-a-cookies/ i http://blog.kukawski.pl/2008/12/28/ciastec...avascript-cz-2/. Artykuły stare, ale jare smile.gif
Co do innych metod to takowe istnieją, ale są nieobsługiwane przez starsze przeglądarki - http://blog.kukawski.pl/2009/05/09/przecho...tronie-klienta/
piernik123
2.04.2011, 20:47:06
Nie bardzo mi to pomogło smile.gif W tej chwili skrypt tworzy ciacho, ale bez żadnej zawartości:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.nazwa p { display: none; }
  7. div.nazwa p1 { display: inline; }
  8. </style>
  9.  
  10. <script language="javascript" type="text/javascript">
  11. <!--
  12.          $_COOKIE={};eval((document.cookie+';').replace(/([\w%]+)=?([^;]*);/g,"$$_COOKIE['$1']='$2';"));
  13.          function setCookie(name, value, expires, path, domain, secure){
  14.             document.cookie=name+'='+escape(value||'')+
  15.                (expires?';expires='+new Date(+new Date()+expires*864e5).toGMTString():'')+
  16.                (path?';path='+path:'')+
  17.                (domain?';domain='+domain:'')+
  18.                (secure?';secure':'');
  19.          }
  20. function nazwa(element) {
  21. i = 0;
  22. setCookie('nazwa');
  23. $_COOKIE.nazwa;
  24. while (e = document.getElementById("m" + i++)) {
  25.    e.style.display = "none";
  26. }
  27. document.getElementById(element).style.display = "inline";
  28. }
  29. menu('m0');
  30. // -->
  31. </script>
  32.  
  33.       </head>
  34.  
  35.       <body>
  36.  
  37. <div class="nazwa">
  38. <p id="m0">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  39. <p1 id="m1">
  40. Tekst1 po kliknięciu w odnośnik "tekst 1"
  41. </p1>
  42. </div>
  43.  
  44. <a href="#" onclick="nazwa('m1'); return false;">tekst1</a>
  45. <a href="#" onclick="nazwa('m0'); return n;">tekst2</a>
  46.  
  47.  
  48.       </body>      </html>
[HTML] pobierz, plaintext

Wiem, że wygląda to prymitywnie, ale jak wcześniej pisałem jest to dla mnie bardzo skomplikowane; nawet po lekturze, która została mi kilka godzin temu zadana;)
kamil4u
2.04.2011, 21:41:00
Byłeś blisko smile.gif http://jsfiddle.net/ut3YL/6/ - trochę, źle sformatowany kod(spacje, taby), ale mam nadzieję, że sobie poradzisz.
wNogachSpisz
2.04.2011, 23:59:18 
[JAVASCRIPT] pobierz, plaintext 
  1. function ltrim ( str, charlist ) {
  2.     charlist = !charlist ? ' \s\xA0' : (charlist+'').replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, '\$1');
  3.     var re = new RegExp('^[' + charlist + ']+', 'g');
  4.     return (str+'').replace(re, '');
  5. }
  6.  
  7. function getCookie(key) {
  8. 	var cookieList = document.cookie
  9. 	var cookieSplit = cookieList.split(';')
  10.  
  11. 	for ( var i = 0, j = cookieSplit.length; i < j; i++ ) {
  12. 		var cookiePair = cookieSplit[i]
  13. 		var cookieVars = cookiePair.split('=')
  14. 		if ( key == ltrim(cookieVars[0])) {
  15. 			return cookieVars[1]
  16. 		}
  17. 	}
  18. 	return null
  19. }
  20.  
  21. function setcookie(name, value, expires, path, domain, secure) {
  22.     expires instanceof Date ? expires = expires.toGMTString() : typeof(expires) == 'number' && (expires = (new Date(+(new Date) + expires * 1e3)).toGMTString());
  23.     var r = [name + "=" + escape(value)], s, i;
  24.     for(i in s = {expires: expires, path: path, domain: domain}){
  25.         s[i] && r.push(i + "=" + s[i]);
  26.     }
  27.     return secure && r.push("secure"), document.cookie = r.join(";"), true;
  28. }
[JAVASCRIPT] pobierz, plaintext
piernik123
3.04.2011, 08:53:28
Kamil jesteś świetny. Próbowałem jednak dodać ten kod na stronę i przez błędy po wywołaniu funkcji tekst znika. Musiałem go trochę poprawić i znów się pogubiłem:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p.p2 { display: none; }
  7. div.tabeleczki p.p1 { display: inline; }
  8.  
  9. </style>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. <!--
  13. function tabeleczki(element) {
  14. i = 0;
  15. while (e = document.getElementById("m" + i++)) {
  16.    e.style.display = "none";
  17. }
  18. document.getElementById(element).style.display = "inline";
  19. }
  20. menu('m0');
  21.  
  22. function show(id)
  23. {
  24. document.getElementById(id).style.display = 'inline';
  25. }
  26.  
  27. // -->
  28. </script>
  29.  
  30.       </head>
  31.  
  32.       <body>
  33.  
  34. <div class="tabeleczki">
  35. <p id="m0" class="p2">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  36. <p id="m3" class="p2">Tekst4 po kliknięciu w odnośnik "tekst 4"</p>
  37. <p id="m1" class="p1">
  38. Tekst1 po kliknięciu w odnośnik "tekst 1"
  39. </p>
  40. <p id="m2" class="p1">
  41. Tekst1 po kliknięciu w odnośnik "tekst 3"
  42. </p>
  43. </div>
  44.  
  45. <a href="#" onclick="tabeleczki('m0');tabeleczki('m3');show('m0');show('m3'); return n;">tekst1</a>
  46. <a href="#" onclick="tabeleczki('m1');tabeleczki('m2');show('m1');show('m2'); return false;">tekst2</a>
  47.  
  48.  
  49.       </body>      </html>
[HTML] pobierz, plaintext

Po dodaniu funkcji show wszystko działa (nazwę funkcji ukrywającej tekst nazwałem tabeleczki, ponieważ tak też jest na stronie;)) ale jak teraz dołożyć do tego cookies?
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p.p2 { display: none; }
  7. div.tabeleczki p.p1 { display: inline; }
  8.  
  9. </style>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. <!--
  13. function setCookie(name, value, expires, path, domain, secure){
  14.     document.cookie=name+'='+escape(value||'')+
  15.         (expires?';expires='+new Date(+new Date()+expires*864e5).toGMTString():'')+
  16.         (path?';path='+path:'')+
  17.         (domain?';domain='+domain:'')+
  18.         (secure?';secure':'');
  19. }
  20.      function getCookie(N){
  21.     if(N=(new RegExp(';\\s*'+(''+N).replace(/([()[\]{}\-.*+?^$|\/\\])/g,'\\$1')+'=([^;]*)')).exec(';'+document.cookie+';'))return N[1]
  22. }  
  23. function tabeleczki(element) {
  24. i = 0;
  25. while (e = document.getElementById("m" + i++)) {
  26.    e.style.display = "none";
  27. }
  28.           setCookie('test',element)
  29. document.getElementById(element).style.display = "inline";
  30. }
  31. menu('m0');
  32.  
  33. function show(id)
  34. {
  35.           setCookie('test',element)
  36. document.getElementById(id).style.display = 'inline';
  37. }
  38.           onload = function(){
  39.            if(getCookie('test'))
  40.            tabeleczki(getCookie('test'));
  41.           }
  42. // -->
  43. </script>
  44.  
  45.       </head>
  46.  
  47.       <body>
  48.  
  49. <div class="tabeleczki">
  50. <p id="m0" class="p2">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  51. <p id="m3" class="p2">Tekst4 po kliknięciu w odnośnik "tekst 4"</p>
  52. <p id="m1" class="p1">
  53. Tekst1 po kliknięciu w odnośnik "tekst 1"
  54. </p>
  55. <p id="m2" class="p1">
  56. Tekst1 po kliknięciu w odnośnik "tekst 3"
  57. </p>
  58. </div>
  59.  
  60. <a href="#" onclick="tabeleczki('m0');tabeleczki('m3');show('m0');show('m3'); return n;">tekst1</a>
  61. <a href="#" onclick="tabeleczki('m1');tabeleczki('m2');show('m1');show('m2'); return false;">tekst2</a>
  62.  
  63.  
  64.       </body>      </html>
[HTML] pobierz, plaintext

Bo teraz coś namieszałem i kod znów zaczyna błędnie działać
peter13135
3.04.2011, 09:47:15
http://laczek.ath.cx

to mój skrypt forum i działa chowanie kategorii, popatrz w źródło, raczej nie jest skomplikowany smile.gif
kamil4u
3.04.2011, 13:40:45
Tym razem już nie analizowałem całego kodu, ale i tak zauważyłem kilka błędów:
- w funkcji show masz : setCookie('test',element) ,ale nie ma zmiennej "element", tylko "id"
- nie widzę u Ciebie funkcji menu, a w kodzie masz: menu('m0');
- nadpisujesz ciasteczko
- ogólnie trochę chaotyczny kod smile.gif

Rozumiem, że chcesz jednym linkiem otwierać kilka elementów, zrób tak:
- użyj atrybutu klasy(class) lub nazwy(name)
- użyj jednej funkcji, która pokazuje wszystkie pola(razem z zapisem do ciasteczka i ukrywania pozostałych pól)
- do powyższej funkcji jako argument podawaj nazwę klasy, nazwy, a nie tak jak dotychczas id
- w ciastku zapisuj nazwę klasy,nazwy
- kod do pokazywania(tyko pokazywania, bez obsługi ciasteczek i ukrywania innych pól) może wyglądać tak:
Kod
function show(name){
var i,els, el;
for(i=0,els=document.getElementsByName(name); el=els[i++]){
  el.style.display = 'block';
}
}


Ew. możesz zapisać w ciasteczku tablicę: http://forum.4programmers.net/Webmastering...ablic_w_cookies , ale nie polecałbym Tobie tego.
piernik123
3.04.2011, 15:23:49
Już mniejsza o kod, bo samemu i tak nic lepszego nie uda mi się napisać smile.gif Jak radziłeś w ciastku zapisuję nazwę klasy: setCookie('test2','p1/p2',element) - nie wiem tylko jak teraz je odczytać. Chodzi o te ostatnie linijki w JS:
[HTML] pobierz, plaintext 
  1.           onload = function(){
  2.            if(getCookie('test'))
  3.            tabeleczki(getCookie('test'));
  4.            if(getCookie('test2'))
  5.            tabeleczki(getCookie('test2'));
  6.           }
[HTML] pobierz, plaintext

Sam kod wygląda na razie tak:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p.p2 { display: none; }
  7. div.tabeleczki p.p1 { display: inline; }
  8.  
  9. </style>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. function setCookie(name, value, expires, path, domain, secure){
  13.     document.cookie=name+'='+escape(value||'')+
  14.         (expires?';expires='+new Date(+new Date()+expires*864e5).toGMTString():'')+
  15.         (path?';path='+path:'')+
  16.         (domain?';domain='+domain:'')+
  17.         (secure?';secure':'');
  18. }
  19.  
  20.      function getCookie(N){
  21.     if(N=(new RegExp(';\\s*'+(''+N).replace(/([()[\]{}\-.*+?^$|\/\\])/g,'\\$1')+'=([^;]*)')).exec(';'+document.cookie+';'))return N[1]
  22. }
  23. function tabeleczki(element) {
  24. i = 0;
  25. while (e = document.getElementById("m" + i++)) {
  26.    e.style.display = "none";
  27. }
  28.           setCookie('test','p1',element)
  29. document.getElementById(element).style.display = "inline";
  30. }
  31. tabeleczki('m0');
  32. function show(id)
  33. {
  34.           setCookie('test2','p2',id)
  35. document.getElementById(id).style.display = 'inline';
  36. }
  37.           onload = function(){
  38.            if(getCookie('test'))
  39.            tabeleczki(getCookie('test'));
  40.            if(getCookie('test2'))
  41.            tabeleczki(getCookie('test2'));
  42.           }
  43. </script>
  44.  
  45.       </head>
  46.  
  47.       <body>
  48.  
  49. <div class="tabeleczki">
  50. <p id="m0" class="p2">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  51. <p id="m3" class="p2">Tekst4 po kliknięciu w odnośnik "tekst 4"</p>
  52. <p id="m1" class="p1">
  53. Tekst1 po kliknięciu w odnośnik "tekst 1"
  54. </p>
  55. <p id="m2" class="p1">
  56. Tekst1 po kliknięciu w odnośnik "tekst 3"
  57. </p>
  58. </div>
  59.  
  60. <a href="#" onclick="tabeleczki('m0');tabeleczki('m3');show('m0');show('m3'); return n;">tekst1</a>
  61. <a href="#" onclick="tabeleczki('m1');tabeleczki('m2');show('m1');show('m2'); return false;">tekst2</a>
  62.  
  63.  
  64.       </body>      </html>
[HTML] pobierz, plaintext

Proszę o jeszcze chwilę cierpliwości do mnie, bo czuję że jestem na prawdę blisko, ale bez Waszej pomocy nie uda mi się tego skończyć smile.gif
kamil4u
3.04.2011, 15:42:22
Źle mnie zrozumiałeś. Mam nadzieję, że to jest to co chciałeś: http://jsfiddle.net/V4jSv/2/
piernik123
3.04.2011, 16:59:56
Wielkie dzięki, dokładnie tak chciałem. Jeszcze zapytam czy mimo wszystko nie ma możliwości pozostania przy mojej wersji kodu, z funkcją show. Bez niej po wstawieniu kodu na stronę po prostu skrypt przestaje poprawnie funkcjonować. Nie wiem czemu; co prawda pokaż/ukryj działa, ale divy zmieniają pozycję, a co najważniejsze po odświeżeniu strony wciąż jest "Tekst1". Błędów raczej nie popełniłem, od godziny starałem się umieścić Twój skrypt na stronie (www.chelseafc.ugu.pl - przyciski Terminarz/Tabela - na www.chelseaforum.pl z funkcją show działają) lecz wciąż mi to nie wychodzi. Ale mimo to dzięki, bo na prawdę mi pomogłeś i w razie braku odpowiedzi postaram się jeszcze z tym pobawić chociaż obawiam się, że nic z tego nie będzie.
kamil4u
3.04.2011, 17:26:26
Przeanalizuj mój kod i spróbuj sam coś wykombinować. W Twoim kodzie jest dużo błędów. Chociażby zapisywanie ciasteczka - przeanalizuj co tam napisałeś.. setCookie - funkcja ta przyjmuje 2 argumenty(więcej, ale dla Ciebie 2 smile.gif ), a Ty używasz 3. Poza tym używaj tylko 1 ciasteczka.

Jeżeli będą tam tylko 2 dane możesz zapisywać do ciasteczka wartość true/false i w zależności, którą tabelkę chcesz pokazać odpowiednio manipulujesz ciastkiem:
Kod
function pokaz1ukryj2(){
//...
ciastko = false;
}

function pokaz2ukryj1(){
//...
ciastko = true;
}

if(ciastko == true)
pokaz1ukryj2()
else
pokaz2ukryj1();
piernik123
4.04.2011, 16:15:58
Zauważyłem jeszcze, że Twój kod nie chce działać na IE, i to nie tylko na mojej stronie, ale też w fiddlerze:
Cytat(kamil4u @ 3.04.2011, 16:42:22 ) *
Źle mnie zrozumiałeś. Mam nadzieję, że to jest to co chciałeś: http://jsfiddle.net/V4jSv/2/

Czemu? biggrin.gif Trzeba będzie zastąpić czymś getElementsByClassName

Poza tym udało mi się wstawić ten skrypt na stronę, ale cookies wciąż nie działa; mimo, że zawartość poprawnie zmienia się z p1 na p2, po odświeżeniu strony wciąż pojawia się tekst dla klasy akapitu p1. Jest jakaś możliwość, że mam zbyt obciążony serwer aby to funkcjonowało?
kamil4u
4.04.2011, 18:57:25
W IE popatrz w konsolę błędów. Z funkcją getElementsByClassName nie powinno być problemów - w necie są tysiące takich funkcji(, gdyż IE natywnie jej nie obsługuje)

Zainstaluj dodatek do FF do zarządzania ciasteczkami i zobacz co jest grane. I zawsze spr. konsolę błędów.
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.