problema con nn7

**alidik** · 12-06-2003, 23:02

Sono alle prese con una finestra molto complessa in cui alcune parti devono apparire o meno a seconda di una selezione.

Per fare le prove, ho creato il seguente script che è molto più semplice, però con nn7 non funziona, perchè se cambi per più volte consecutive la selezione fra pippo e pluto le dimensioni della tabella aumentano, invece con ie funziona tutto bene.

per vedere l'esempio clicca qui

-------------------------------------------------------
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function cambioOsi() {
osiValue = document.getElementById('osi').value;
if(osiValue=="1" ) {
document.getElementById('group3').style.display='i nline';
document.getElementById('group8').style.display='i nline';
}
else {
document.getElementById('group3').style.display='n one';
document.getElementById('group8').style.display='n one';
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" >
<DIV ALIGN="center">
<FORM NAME="F_1" ID="F_1">
<TABLE BORDER="1" CLASS="tab" WIDTH="300">
<TR>
<TD>
<TABLE CELLSPACING="0" CELLPADDING="2" DATAPAGESIZE="2" BORDER="0">
<TR>
<TH ID="mandatory" NOWRAP WIDTH="100" align="right">Tipologia</TH>
<TD>
<SELECT NAME="osi" ID="osi" onchange="cambioOsi();" >
<OPTION VALUE="0" SELECTED></OPTION>
<OPTION VALUE="1">pippo</OPTION>
<OPTION VALUE="2">pluto</OPTION>
</SELECT>
</TD>
<TD NOWRAP ID="class1" STYLE="display:none">Anno origine</TD>
<TD ALIGN="left" ID="class2" STYLE="display:none"><INPUT TYPE="text" SIZE="6"></TD>
</TR>
</table>
<table border="1">
<TR ID="group3" STYLE="display:none" >
<TH ALIGN="right" ID="mandatory" WIDTH="100">Tipo UA</TH>
<TD COLSPAN=3>
<SELECT NAME="tipoAttributo" ID="tipoAttributo" >
<OPTION VALUE="0" SELECTED></OPTION>
<OPTION VALUE="1">Popolazione</OPTION>
<OPTION VALUE="2">flusso di eventi</OPTION>
</SELECT>
</TD>
</TR>
<TR ID="group8" STYLE="display:none">
<TH ALIGN="right" WIDTH="100">Tipo osservazione</TH>
<TD COLSPAN="3" NOWRAP>VA OSSERVATA INDIVIDUALMENTE</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
----------------------------------------------------------

In un'altra occasione avevo risolto sostituendo display con visibility ottenendo il risultato che segue, ma questa soluzione va bene solo se i campi nascosti sono pochi come nell'esempio, se sono tanti il risultato è orribile perchè si ottiene una finestra enorme con pochi campi visibili per ogni scelta. Quindi nel mio caso reale questa soluzione non va bene.

per vedere l'esempio clicca qui

--------------------------------------------------------------
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function cambioOsi() {
osiValue = document.getElementById('osi').value;
if(osiValue=="1" ) {
document.getElementById('group3').style.visibility ='visible';
document.getElementById('group8').style.visibility ='visible';
}
else {
document.getElementById('group3').style.visibility ='hidden';
document.getElementById('group8').style.visibility ='hidden';
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" >
<DIV ALIGN="center">
<FORM NAME="F_1" ID="F_1">
<TABLE BORDER="1" CLASS="tab" WIDTH="300">
<TR>
<TD>
<TABLE CELLSPACING="0" CELLPADDING="2" DATAPAGESIZE="2" BORDER="0">
<TR>
<TH ID="mandatory" NOWRAP WIDTH="100" align="right">Tipologia</TH>
<TD>
<SELECT NAME="osi" ID="osi" onchange="cambioOsi();" >
<OPTION VALUE="0" SELECTED></OPTION>
<OPTION VALUE="1">pippo</OPTION>
<OPTION VALUE="2">pluto</OPTION>
</SELECT>
</TD>
<TD NOWRAP ID="class1" STYLE="visibility:hidden">Anno origine</TD>
<TD ALIGN="left" ID="class2" STYLE="visibility:hidden"><INPUT TYPE="text" SIZE="6"></TD>
</TR>
</table>
<table border="1">
<TR ID="group3" STYLE="visibility:hidden" >
<TH ALIGN="right" ID="mandatory" WIDTH="100">Tipo UA</TH>
<TD COLSPAN=3>
<SELECT NAME="tipoAttributo" ID="tipoAttributo" >
<OPTION VALUE="0" SELECTED></OPTION>
<OPTION VALUE="1">Popolazione</OPTION>
<OPTION VALUE="2">flusso di eventi</OPTION>
</SELECT>
</TD>
</TR>
<TR ID="group8" STYLE="visibility:hidden">
<TH ALIGN="right" WIDTH="100">Tipo osservazione</TH>
<TD COLSPAN="3" NOWRAP>VA OSSERVATA INDIVIDUALMENTE</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
------------------------------------------------------------

C'è un modo per ottenere il risultato del primo esempio sia con nn7 sia con ie????

Aiutatemi per favore

Grazie

**Mich_** · 13-06-2003, 09:21

'osi' e` un campo select.
Non esiste in JS la proprieta` value di un campo select (solo in jscript viene riconosciuta).

Occorre fare cosi:

osiOgg = document.getElementById('osi');
osiValue = osiOgg.options[osiOgg.selectedIndex].value;

Ciao
Michele

**alidik** · 13-06-2003, 09:52

ho provato ma non funziona lo stesso...

selezionando più volte pippo pluto pippo pluto ecc. la table diventa sempre più grande...

forse ho sbagliato qualche altra cosa?

in ogni caso ti ringrazio, ciao!

<html>
<head>
<title></title>
<script LANGUAGE="JavaScript">
function cambioOsi() {
osiOgg = document.getElementById('osi');
osiValue = osiOgg.options[osiOgg.selectedIndex].value;
if(osiValue=="1" ) {
document.getElementById('group3').style.display='i nline';
document.getElementById('group8').style.display='i nline';
}
else {
document.getElementById('group3').style.display='n one';
document.getElementById('group8').style.display='n one';
}
}
</SCRIPT>
</head>
<body BGCOLOR="#ffffff" >
<div ALIGN="center">
<form NAME="F_1" ID="F_1">
<table BORDER="1" CLASS="tab" WIDTH="300">
<tr>
<td>
<table CELLSPACING="0" CELLPADDING="2" DATAPAGESIZE="2" BORDER="0">
<tr>
<th ID="mandatory" NOWRAP WIDTH="100" align="right">Tipologia</th>
<td>
<select NAME="osi" ID="osi" onchange="cambioOsi();" >
<option VALUE="0" SELECTED></option>
<option VALUE="1">pippo</option>
<option VALUE="2">pluto</option>
</select>
</td>
<td NOWRAP ID="class1" STYLE="display:none">Anno origine</td>
<td ALIGN="left" ID="class2" STYLE="display:none"><input TYPE="text" SIZE="6"></td>
</tr>
</table>
<table border="1">
<tr ID="group3" STYLE="display:none" >
<th ALIGN="right" ID="mandatory" WIDTH="100">Tipo UA</th>
<td COLSPAN=3>
<select NAME="tipoAttributo" ID="tipoAttributo" >
<option VALUE="0" SELECTED></option>
<option VALUE="1">Popolazione</option>
<option VALUE="2">flusso di eventi</option>
</select>
</td>
</tr>
<tr ID="group8" STYLE="display:none">
<th ALIGN="right" WIDTH="100">Tipo osservazione</th>
<td COLSPAN="3" NOWRAP>VA OSSERVATA INDIVIDUALMENTE</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

**Mich_** · 13-06-2003, 10:08

Non mi piace un display inline per un <tr>.

Piu` corretto potrebbe essere block, anche se per gli elementi di tabella ci sono argomenti appositi per display.

Pero` il problema sono i browser, e cosa hanno implementato di tali attributi.

Se dovessi farlo io, racchiuderei tutto in uno o piu` <div> ed applicherei display block/none a tali div.

Ciao
Michele

**alidik** · 13-06-2003, 10:23

scusa, vuoi dire che al posto di inline devo scrivere block? e che comunque sarebbe meglio togliere di mezzo la tabella e usare solo div?

**Mich_** · 13-06-2003, 10:33

> scusa, vuoi dire che al posto di inline devo scrivere block?
Esatto

> e che comunque sarebbe meglio togliere di mezzo la tabella e usare solo div?
Non sono entrato nel merito del perche` usi una tabella.
Le tabelle usate per formattare la pagina sono da evitare, ma questo e` un altro problema.

Puoi mettere tutta la tabella dentro un <div> ed applicare il CSS con display=block/none a tale div
Oppure puoi mettere tanti <div> tutti con la stessa classe dentro le celle della tabella (non dentro il <tr> pero`, meglio dentro i vari <td> ) e poi applicare il display=block/none a tale classe.

Ciao
Michele

**alidik** · 13-06-2003, 13:03

funziona!!!! :metallica :metallica
GRAZIEEE!!!

ma perchè le tabelle usate per formattare la pagina sono da evitare?

puoi dare un'occhiata a quello che ho fatto?

dove posso trovare una guida che mi spiega tutti questi "segreti" senza che rompo l'anima a te?

Grazie ancora, ciao!!!

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function cambioOsi() {
osiOgg = document.getElementById('osi');
osiValue = osiOgg.options[osiOgg.selectedIndex].value;
if(osiValue=="1" ) {
document.getElementById('group3').style.display='b lock';
document.getElementById('group31').style.display=' block';
document.getElementById('group8').style.display='b lock';
document.getElementById('group81').style.display=' block';
}
else {
document.getElementById('group3').style.display='n one';
document.getElementById('group31').style.display=' none';
document.getElementById('group8').style.display='n one';
document.getElementById('group81').style.display=' none';
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" >
<DIV ALIGN="center">
<FORM NAME="F_1" ID="F_1">
<TABLE BORDER="1" CLASS="tab" WIDTH="300">
<TR>
<TD>
<TABLE CELLSPACING="0" CELLPADDING="2" DATAPAGESIZE="2" BORDER="0">
<TR>
<TH ID="mandatory" NOWRAP WIDTH="100" align="right">Tipologia</TH>
<TD>
<SELECT NAME="osi" ID="osi" onchange="cambioOsi();" >
<OPTION VALUE="0" SELECTED></OPTION>
<OPTION VALUE="1">pippo</OPTION>
<OPTION VALUE="2">pluto</OPTION>
</SELECT>
</TD>
</TR>
<tr>
<td nowrap>
<div ID="group3" STYLE="display:none" ALIGN="right" ID="mandatory" WIDTH="100">Tipo UA</div></td>
<td>
<div ID="group31" STYLE="display:none">
<SELECT NAME="tipoAttributo" ID="tipoAttributo" >
<OPTION VALUE="0" SELECTED></OPTION>
<OPTION VALUE="1">Popolazione</OPTION>
<OPTION VALUE="2">flusso di eventi</OPTION>
</SELECT>
</div>
</td>
</tr>
<tr><td nowrap>
<div ID="group8" STYLE="display:none" ALIGN="right" WIDTH="100">Tipo osservazione</div></td>
<td nowrap>
<div ID="group81" STYLE="display:none">VA OSSERVATA INDIVIDUALMENTE</div>
</td>
</tr>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>

Discussione: problema con nn7

Strumenti discussione

Ricerca discussione

Visualizza

problema con nn7

Permessi di invio