Newsgroup: it.comp.lang.javascript
Titolo: Mostra nascondi con JQuery

Salve a tutti
con mia sorpresa il codice, in se banale, con Jquery in FF funzia e in IE 8 
(in xp) non funziona.
Non riesco a capire il motivo (con F12 attivo la barra per lo sviluppo ma 
non trovo dove vengono segnalati gli errori javascript che in FF e' in 
Strumenti > console degli errori)
Riporto il codice:
nella pagina ho il seguente codice:

 nella pagina ho il seguente codice:
?

scusate e' scappato il post...
 *********************

[...]
<script language="javascript">
function mostraNascondi(idx){
  var idCosa=idx;
  var imgApri="img/quadrato_1.gif";
  var imgChiudi="img/quadrato_-1.gif";
  if( !$('#'+idCosa).is(':visible') ) {
  $('#'+idCosa).show();
  $('#ico_'+idCosa).attr('src',imgChiudi);
  }
  else {
   $('#'+idCosa).hide();
   $('#ico_'+idCosa).attr('src',imgApri);
  }
}
</script>
[....]
<table>
<tr>
<td colspan="3" class="tdEticSezione"><a
href="javascript:mostraNascondi('elencoMat');"><img
src="img/quadrato_-1.gif" alt="clicca per aprire e chiudere questa sezione"
id="ico_elencoMat" width="16" height="16" align="absmiddle" border="0" />
Elenco materie </a></td>
</tr>
<tr  id="elencoMat" style="display:none;">
    <td>La lista da mostrare o nascondere</td>
</tr>
</table>
Se metto la sezione gia' aperta con IE 8 la chiude e non c'e' verso di
riaprirla ,se invece la pagina la mostra chiusa non la apre.
Sara' sicuramente una errore banale ma li fatto che IE8 non trovo la lista
degli errori....

   if( !$('#'+idCosa).is(':visible') ) { $('#'+idCosa).show();
cosa verifica e cosa fa questo :visible e questo show()?
Perché sotto stai assegnando uno style a un elemento, e lo style "vince" 
su id e class ...
prova a settare delle classi, diciamo che si chiamano .imgChiudi 
e .imgApri (setta la proprietà display), e prova a cambiare il codice con
 $('#'+idCosa).removeClass('imgChiudi').addClass('imgApri');
e viceversa, ovviamente. 
Setta la classe alla tr anziché usare l'attributo style. 
prova un po' e fai sapere.

 prova un po' e fai sapere.
grazie Cristiano, provero' come dici e posto la soluzione.
grazie
:-) 

 grazie Cristiano, provero' come dici e posto la soluzione.
in aggiunta ti suggerisco di evitare costrutti if else, se imposti la
proprietà display allínizio, puoi semplicemente usare l'interaction
helper toggle, vedi
http://api.jquery.com/toggle/
risparmi tempo e linee di codice.

 
http://api.jquery.com/toggle/
carino questo toggle()! :-)

risparmi tempo e linee di codice.
grazie anche a te Oreste.
toggle() l'ho usato anche prima di postare e, sebbene mi faccia risparmiare 
qualche riga non risolve il problema.
Ho fatto un test e sembra che applicare .show() e hide() a un <tr> non abbia 
lo stesso effetto desiderato che invece con un div.
Resoconto:
============
Caso 1
-------------
Se mostro/nascondo delle righe tr con una funzione javascript semplice e 
senza JQuery la cosa funziona:
Ecco il link  in cui ho postato l'esempio
http://www.ferento.it/testJQ/test.htm
Caso 2
-------------
Se uso jQuery con la piccola funzione che mostra/nasconde con l'uso di 
.show() e .hide() funziona tutto con FF ma con IE si ha un comportamento 
anomalo.
La sezione C che parte gia' visibile normalmente, al primo clic viene chiusa 
ma poi non si apre piu'. Le altre non si aprono per niente se al caricamento 
sono gia' nascoste
http://www.ferento.it/testJQ/test_tr.htm
Quindi: sembrerebbe che con IE i tr non possono essere mostrati con .show() 
ma solo nascosti.
mmmah !
Caso 3
-------------
Se invece lo stesso meccanismo viene proposto con dei div funziona tutto con 
FF e IE8
http://www.ferento.it/testJQ/test_div.htm
Deduzione:
i tr non possono essere manipolati con Jquery nello stesso modo come un div 
quando si ha che fare con IE8.
Mi sembra una limitazione *strana*. Dove sbaglio ?

 effetto desiderato che invece con un div.
Ma hai provato come ti ho detto? (togliere style e usare classi, in modo 
che abbiamo la stessa priorità)?

 che abbiamo la stessa priorità)?
Si,
:-(
qui trovi l'esempio con l'applicazione di classi
http://www.ferento.it/testJQ/test_cl.htm
spero di aver capito cosa intendi.
un saluto 

 
http://www.ferento.it/testJQ/test_cl.htm
Non ho sottomano IE purtroppo.
2 cose:
 - .classeMostra{} devi indicare qualcosa, sarà display:table-row 
(attenzione alle vecchie versioni di IE)
 - quando nascondi (e mostri) oltre a addClass rimuovi l'altra; percui, 
se stai nascondendo, $('#'+idCosa).addClass('classeNascosta').removeClass
('classeMostra');
e viceversa (quando mostri vedo che rimuovi la classe, ma non espliciti 
il nuovo valore di display [importante], e viceversa)
Prova un po', se non va vedo di accendere il notebook con IE appena posso.

 </script>
<img src="x1.gif" alt="" border="0" class="mostranascondi" style="display:
none;" onClick="$('.mostranascondi').toggle();">
<img src="x2.gif" alt="" border="0" class="mostranascondi"
onClick="$('.mostranascondi').toggle();">
<p class="mostranascondi" style="display: none;">testo x1</p>
<p class="mostranascondi">testo x2</p>
Saluti. Carlo.

 Prova un po', se non va vedo di accendere il notebook con IE appena posso.
Certo che ne hai di pazienza !
:-)
un saluto 

 qualche riga non risolve il problema.
devi usare jquery seguendo la sua logica, il tuo codice è troppo
incasinato, prova il seguente:
http://oreste.parlatano.org/prove_js/ferento_test/
vedrai che funziona anche con lo stramaledetto ie
controlla bene il codice, da notare che si può pulire ancora di più

 Certo che ne hai di pazienza !
Dunque, ho provato: un bel alert("mostra") (quando deve visualizzare) non 
viene MAI eseguito. Quindi, per IE, non mostra mai; quindi:
 if($('#'+idCosa).is(':visible'))
Quel is(':visible') è sempre true.
Tra l'altro vedo che è cambiata la logica di :visible, non si capisce 
bene ... comunque sia, per IE quell'elemento risulta sempre true (anche 
quando è nascosto).
Cambiamento dalla 1.3.2:
 
http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled
Ho quindi fatto:
 a) .classeMostra{display:table-row} (come dicevo, se ti serve 
compatibilità con le vecchie versioni di IE fai 2 test, andrà settato un 
display:block per queste versioni)
b) Ho messo class='classeMostra' alle tr visibili all'apertura della 
pagina (solo una, nel tuo esempio)
c) ho sostituito l'if :visible con
   if($('#'+idCosa).hasClass('classeMostra')) {
Testato, tutto ok.