(Resolvido) Guarda sessão

[_Vinny_]

Tenho esse código

<script type="text/javascript">
        function edr_collapsible(catid)
        {
            if (document.getElementById('cat' + catid).style.display != 'none')
            {
                document.getElementById('cat' + catid).style.display = 'none';
                document.getElementById('link' + catid).alt = '[+]';
                document.getElementById('link' + catid).src = '/images/ccats_expand.gif';
            }
            else
            {
                document.getElementById('cat' + catid).style.display = '';
                document.getElementById('link' + catid).alt = '[-]';
                document.getElementById('link' + catid).src = '/images/ccats_collapse.gif';
            }
        }
</script>

<a href="java script: edr_collapsible(1);"><img alt="[-]" id="link1" src="images/ccats_collapse.gif"></a>&nbsp;<a href="test.php">Test 1</a>

<div id='cat1'>teste</div>

Ele funciona legal, mas não guarda a informação de mostrar/esconder, tem mexer no codigo para fazer isso?

[SK15]

Bem sempre para se manter algum status deve se guardar a informação em algum lugar :P

Para se guardar informação com JS só existe um jeito que é usando Cookies ...

http://www.quirksmode.org/js/cookies.html

[_Vinny_]

Eu tinha até encontrado esse link por aqui, mas ai que tá, sou um negação em JS -.-'

Como utilizar cookies no meu código já existente? O que tenho que fazer?

[kuroi]

vinny, não entendi exatamente q informacao você ta precisando guardar.

[_Vinny_]

kuroi, no código que postei é um simples script que esconde/mostra um certo conteúdo dentro da div quando clicado no link. O problema é que ao esconder ou mostrar, essa definição não é guardada e ao recarregar a página volta ao estado original de como é o HTML, o que pretendo fazer e salvar a definição de quando é mostrado/escondido o conteúdo.

Eu encontrei outros scripts, porém muito mais complexos e muito pesadoss usando jquery, e eu quero usar esse que postei que é simples e leve.

[SK15]

Cookie é fácil ... adaptei seu código para usar cookies mas não ficou tão pequeno :P

<script type="text/javascript">
function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
 } else var expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i = 0; i < ca.length; i++) {
  var c = ca[i];
  while (c.charAt(0) == ' ') c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}

function edr_collapsible(catid) {
 if (document.getElementById('cat' + catid).style.display != 'none') {
  document.getElementById('cat' + catid).style.display = 'none';
  document.getElementById('link' + catid).alt = '[+]';
  document.getElementById('link' + catid).src = '/images/ccats_expand.gif';
  createCookie(("DivId" + catid), "true", 365);
 } else {
  document.getElementById('cat' + catid).style.display = '';
  document.getElementById('link' + catid).alt = '[-]';
  document.getElementById('link' + catid).src = '/images/ccats_collapse.gif';
  createCookie(("DivId" + catid), "false", 365);
 }
}
</script>

<a href="java script:edr_collapsible(1);"><img alt="[-]" id="link1" src="images/ccats_collapse.gif"></a>&nbsp;<a href="test.php">Test 1</a>
<div id='cat1'>teste</div>
<br />
<a href="java script:edr_collapsible(2);"><img alt="[-]" id="link2" src="images/ccats_collapse.gif"></a>&nbsp;<a href="test.php">Test 2</a>
<div id='cat2'>teste</div>
<br />
<a href="java script:edr_collapsible(3);"><img alt="[-]" id="link3" src="images/ccats_collapse.gif"></a>&nbsp;<a href="test.php">Test 3</a>
<div id='cat3'>teste</div>

<script type="text/javascript">
function memoryStatus(catid) {
 var cookie = readCookie(("DivId" + catid));
 if (cookie != null) {
  if (cookie == "true") {
   document.getElementById('cat' + catid).style.display = 'none';
   document.getElementById('link' + catid).alt = '[+]';
   document.getElementById('link' + catid).src = '/images/ccats_expand.gif';
  } else {
   document.getElementById('cat' + catid).style.display = '';
   document.getElementById('link' + catid).alt = '[-]';
   document.getElementById('link' + catid).src = '/images/ccats_collapse.gif';
  }  
 }
}

for (var i = 1; i <= 3; i++) { memoryStatus(i); }
</script>

[_Vinny_]

Cookie é fácil ... adaptei seu código para usar cookies mas não ficou tão pequeno

Ficou muito menor do que eu usava. Porém não funcionou aqui -.-'

Alias, no link que esta assim:

<a href="java script:edr_collapsible(3);">

O correto seria:

<a href="javascript: edr_collapsible(3);">

[SK15]

Aqui funciona de boa testado no IE 8 e FF 3.6.13 :P

Quanto a esse erro de dar espaço na palavra "javascript" e culpa do fórum IBP ... ele tem essa 'trava' se segurança para não ativar códigos malicisos assim como trava para conteudo Flash entre outras dessas pequenas travas ... mas basta tirar o espaço.

[_Vinny_]

Aqui funciona de boa testado no IE 8 e FF 3.6.13 :P

Quanto a esse erro de dar espaço na palavra "javascript" e culpa do fórum IBP ... ele tem essa 'trava' se segurança para não ativar códigos malicisos assim como trava para conteudo Flash entre outras dessas pequenas travas ... mas basta tirar o espaço.

Revendo aqui até funcionou no IE5+, FF3+ e Opera10, mas no Chrome não funciona -.-'

É... o problema do espaço eu percebi quando postei minha resposta :huh:

[Jonathan Queiroz]

Testei o código no Google Chrome e funcionou perfeitamente (versão 4). Pode postar o código completo e a versão que está utilizando?

[SK15]

Bem testei aqui no Chorme (versão 8) e relamente não funcionou ...

Fui procurar a causa e descobri que o Chorme não aceita cookie de um arquivo local ...

Referência: http://stackoverflow.com/questions/335244/...-jquery-cookies

Bastei jogar o arquivo num servidor online que funciou de boa ... então teste online ...

[Willian Gustavo Veiga]

Só como curiosidade, uma alternativa aos cookies seria o Storage do HTML 5. Ele fornece uma interface simples para guardar e recuperar informações. Vale lembrar que o HTML 5 ainda está em desenvolvimento.

Um abraço.

[_Vinny_]

@Jonathan, o código é o mesmo postado pelo SK15 com versão 8 do Chrome.

@SK15, perfeitamente. Enviei para meu servidor e funcionou. Obrigado!!!