PDA

View Full Version : [HTML + CSS + JS] Con IE7 non funziona bene la visualizzazione dinamica di un oggetto

VegetaSSJ5
30-01-2008, 22:01
PROBLEMA RISOLTO!

Boh il titolo non è che spieghi molto, ma non ho saputo fare di meglio... :D

Preambolo:
Ho una tabella con dei campi per un form.
Nella tabella ci sono ad un certo punto 2 radiobutton: se si seleziona il primo (selezionato per default) non accade nulla. Se si seleziona il secondo appare una sottotabella con dei dati aggiuntivi (partita iva eccetera per un'azienda). Questo comportamento viene realizzato con una piccola funzione javascript che modifica dinamicamente (in base al pulsante selezionato) le proprietà css della sottotabella facendola visualizzare o meno.

Passiamo al problema:
Con Firefox 2.0.0.11 funziona bene, cioè quando premo il secondo radiobutton mi appare la sottotabella, quando seleziono il primo la sottotabella scompare.

Con IE7 non funziona bene. Quando premo il secondo radiobutton non succede nulla. Se poi clicco su un altro punto della pagina web allora compare la sottotabella. Stessa cosa per farla scomparire.

Magari se lo testate personalmente capirete meglio il problema, cmq mi pare proprio strano questo comportamento con IE7.
Incollo il codice completo della pagina.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<script src="compra_online.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function EnableDisableTabPOPUP (RadioSelected) {
var tabPOPUP = document.getElementById("tabPOPUP");
if (RadioSelected.value == "PRIVATO") {
tabPOPUP.style.display= "none";
}
else {
tabPOPUP.style.display= "";
}
}
</script>
</head>
<body>
<table id="Tab_Compra_Online" width="490" style="margin-left: auto; margin-right: auto;">
<tr><td class="field_name">Nome</td>
<td><input type="text" id="nome" name="nome" maxlength="100" size="30" /></td></tr>
<tr><td class="field_name">Cognome</td>
<td><input type="text" id="cognome" name="cognome" maxlength="100" size="30" /></td></tr>
<tr><td class="field_name">E-Mail</td>
<td><input type="text" id="email" name="email" size="30" maxlength="100" /></td></tr>
<tr><td class="field_name" valign="top">Indirizzo</td>
<td><input type="text" id="indirizzo1" name="indirizzo1" size="30" maxlength="100" /><br />
<input type="text" id="indirizzo2" name="indirizzo2" size="30" maxlength="100" style="margin-top: 3px;" /><br /></td></tr>
<tr><td class="field_name">Citt&agrave;</td>
<td><input type="text" id="citta" name="citta" size="30" maxlength="100" /></td></tr>
<tr><td class="field_name">Provincia</td>
<td><input type="text" id="prov" name="prov" size="30" maxlength="100" /></td></tr>
<tr><td class="field_name">CAP</td>
<td><input type="text" id="cap" name="cap" size="7" maxlength="5" /></td></tr>
<tr><td class="field_name">Privato o Azienda?</td>
<td>Privato <input type="radio" value="PRIVATO" id="PRIVATO_radio" name="radiolist1" checked="checked" onchange="javascript: EnableDisableTabPOPUP(this);" />&nbsp;&nbsp;Azienda <input type="radio" value="AZIENDA" id="AZIENDA_radio" name="radiolist1" onchange="javascript: EnableDisableTabPOPUP(this);" /></td></tr>
</table>

<table id="tabPOPUP" width="490" style="display: none; margin-left: auto; margin-right: auto;">
<tr><td class="field_name">P. IVA</td>
<td><input type="text" id="PIVA" name="PIVA" size="13" maxlength="11" /> </td></tr>
<tr><td class="field_name">Indirizzo di fatturazione</td>
<td><input type="text" id="ind_fatt" name="ind_fatt" size="30" maxlength="100" /></td></tr>
</table>

<table id="Tab_Compra_Online_Footer" width="490" style="margin-left: auto; margin-right: auto;">
<tr><td class="field_name">Note<br />Comunicazioni particolari</td>
<td><textarea cols="30" rows="5" name="note" id="note" style="border: 1px solid #6E7B8B; font: 100% Verdana, sans-serif;"></textarea></td></tr>
<tr><td colspan="2" style="text-align: center;"><input value="Invia i tuoi dati" name="submit" type="submit" style="background-color: white;" /></td></tr>
</table>
</body>
</html>
MEMon
31-01-2008, 11:46
Prova con onclick al posto di onchange, IE lancia onchange quando l'elemento che è cambiato perde il focus.

NOTA:Ti consiglio di usare per i metodi nomi con l'iniziale minuscola, idem per oggetti e variabili,mentre per le classi(se mai ne farai uso) di usare nomi con l'iniziale maiuscola.
Non cambia nulla ma ne va della facilità di lettura, e poi è buona norma fare così.
Va beh diciamo che io detesto leggere codice che non rispetta queste semplici regole...
VegetaSSJ5
31-01-2008, 11:57
Prova con onclick al posto di onchange, IE lancia onchange quando l'elemento che è cambiato perde il focus.

NOTA:Ti consiglio di usare per i metodi nomi con l'iniziale minuscola, idem per oggetti e variabili,mentre per le classi(se mai ne farai uso) di usare nomi con l'iniziale maiuscola.
Non cambia nulla ma ne va della facilità di lettura, e poi è buona norma fare così.
Va beh diciamo che io detesto leggere codice che non rispetta queste semplici regole...
con l'onclick funziona! :cry:
e io che pensavo che l'onchange avrebbe migliorato il codice... mi stavo scervellando! :muro:
come fai a sapere che IE lancia l'onchange quando l'elemento che è cambiato perde il focus?
cmq, lasciando l'onchange, (con IE) dopo aver cliccato sul radiobutton Azienda (e non è quindi apparso nulla) se si seleziona Privato la sottotabella appare! se si premono prima uno e poi l'altro radiobutt la tabella appare e scompare ma esattamente al contrario di come dovrebbe funzionare. E' come se l'onchange viene messo in un buffer che si svuota dopo il click successivo... E in questo caso non perde il focus perchè seleziono sempre uno dei due radiobutton.... :boh:
MEMon
31-01-2008, 12:07
con l'onclick funziona! :cry:
e io che pensavo che l'onchange avrebbe migliorato il codice... mi stavo scervellando! :muro:
come fai a sapere che IE lancia l'onchange quando l'elemento che è cambiato perde il focus?
cmq, lasciando l'onchange, (con IE) dopo aver cliccato sul radiobutton Azienda (e non è quindi apparso nulla) se si seleziona Privato la sottotabella appare! se si premono prima uno e poi l'altro radiobutt la tabella appare e scompare ma esattamente al contrario di come dovrebbe funzionare. E' come se l'onchange viene messo in un buffer che si svuota dopo il click successivo... E in questo caso non perde il focus perchè seleziono sempre uno dei due radiobutton.... :boh:

Il motivo è che IE lancia l'onchange quando l'elemento perde il focus, esempio:
1)E' selezionato PRIVATO
2)Selezioni AZIENDA e cambia di stato
3)Riselezioni PRIVATO(AZIENDA perde il focus e IE segnala che è cambiato)

E comunque mi sembra che lo standard HTML dice che l'evento onchange DEVE essere lanciato quando l'elemento perde il focus, quindi IE è nel giusto.
VegetaSSJ5
31-01-2008, 12:38
ok thanks! ;)
però secondo me questo comportamento non è che sia tanto logico. cioè se l'oggetto cambia stato allora si lancia l'onchange. il comportamento attuale, cioè cambio di stato e perdita del focus, potrebbe magari appartenere ad un ipotetico altro evento, del tipo onchangenofocus (è un po' lunghetto come nome... :stordita: ).
MEMon
31-01-2008, 12:42
ni, cioè in questo specifico caso hai ragione, non servirebbe attendere che l'elemento perda il focus, ma ad esempio con un input di tipo text è logico un funzionamento di questo tipo.
Pensa infatti se uno edita un campo, ma poi ci ripensa e lo rimette come era prima, in questo caso l'evento onchange non ha senso di essere lanciato(infatti sui text anche firefox attende che l'elemento perda il focus).
VegetaSSJ5
31-01-2008, 12:53
ni, cioè in questo specifico caso hai ragione, non servirebbe attendere che l'elemento perda il focus, ma ad esempio con un input di tipo text è logico un funzionamento di questo tipo.
Pensa infatti se uno edita un campo, ma poi ci ripensa e lo rimette come era prima, in questo caso l'evento onchange non ha senso di essere lanciato(infatti sui text anche firefox attende che l'elemento perda il focus).
hai ragione!
allora secondo me, l'implementazione migliore è quella di firefox (anche se non rispecchia lo standard). :O