Newsgroup: it.comp.lang.javascript
Titolo: bug di firefox? funziona solo se inserisco un alert....

Ciao a tutti.
Sto cercando di creare una pagina web che mi permetta di
personalizzare la stampa di una tabella.
Per farlo devo aggiungere dinamicamente il contenuto ad una tabella e
creare delle regole css da applicarvi.
Non funziona se non dopo una minima interazione con l'utente. Ovvero
va solo dopo che mostro un alert oppure se l'utente clicca un bottone.
Di seguito una pagina di esempio da provare. Se in
html_colonne_anteprima() commentate l'alert la tabella inizialmente è
mostrata senza applicare le regole assegnate dalle classi col1 e col2.
Basta premere su "aumenta" che magicamente la tabella viene corretta.
Il comportamento non cambia se le regole col1 e col2 sono inserite
staticamente.
Qualche suggerimento?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/
TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
		<title>Prova</title>
		<style type="text/css" >
			#tabella {
				border : 1px solid;
			}
			#tabella td {
				border : 1px solid;
			}
			#tabella th {
				border : 1px solid;
				background-color : #AA55FF;
			}
		</style>
		<script type="text/javascript">
			function html_colonne_anteprima(){
				var html =
						"<tr><th class='col1'>col1</th><th class='col2'>col2</th></tr>"
+
						"<tr><td class='col1'>col1</td><td class='col2'>col2</td></tr>";
				alert( html );
				return html;
			 }
			function set_css_anteprima(){
			 	var css = document.styleSheets[0];
				css.insertRule( ".col1 { width: 100px; }", 3 );
				css.insertRule( ".col2 { width: 100px; }", 4 );
			 }
			 function set_anteprima(){
			 	var tab_anteprima = document.getElementById( "tabella" );
				var tab_body = tab_anteprima.tBodies[0];
				tab_body.innerHTML = html_colonne_anteprima();
			 }
			 function inizializza_anteprima(){
			 	set_anteprima();
				set_css_anteprima();
			 }
			 function getCssRule( selector ){
			 	var cssRules = document.styleSheets[0].cssRules;
				var rule = null;
				for( var i=0, max = cssRules.length; i<max; i++ ){
					selText = cssRules[i].selectorText;
					if ( selText == selector )
						rule = cssRules[i];
				}
				return rule;
			 }
			 function aumenta_dim(){
			 	var rule = getCssRule( ".col1" );
				rule.style[ 'width' ] = "200px";
			 }
		</script>
	</head>
	<body onload="inizializza_anteprima()">
		<button onclick="aumenta_dim()">aumenta</button>
		<table id="tabella">
			<tbody>
			</tbody>
		</table>
	</body>
</html>
--
Ciao
Blue

 Qualche suggerimento?
Usare le DOM API invece dell'innerHTML.
N.B.
Su IE, la gestione degli stylesheet è differente. Quindi se vuoi far
girare questo codice anche sui browser Microsoft devi tenerne conto.
-- 
~  "FINARMENTE  LI SFRATTATI AVRANNO UN TETTO SULLA  TESTA!
 ...però tirato ammodino, un  tegolo pe' vorta.." (Il vernacoliere)

 girare questo codice anche sui browser Microsoft devi tenerne conto.
Già... comincio ad odiare IE... devo modificare lo stile ad ogni
elemento. Oppure c'è un modo per ottenere lo stesso risultato più
velocemente?
Grazie.
--
Ciao
Blue

 velocemente?
Usando sempre gli stylesheet, come ti ho detto, ma in modo diverso. IE
non ha "insertRule", ad esempio, ma "addRule", e così via.
Su questo NG si è già parlato dell'argomento e se cerchi negli archivi
troverai sicuramente qualcosa.
-- 
~ "Il successo è l'abilità di passare da un fallimento all'altro senza
perdere l'entusiasmo."
(W. Churchill)

 troverai sicuramente qualcosa.
http://www.criosoftware.it/default23.aspx
-- 
"Non sai che ci vuol scienza
 ci vuol costanza
 ad invecchiare senza maturità"
									    F.G.

 
http://www.criosoftware.it/default23.aspx
Andrebbe aggiornato; direi che di acqua sotto i ponti per Opera ne è
passata. :)
-- 
~ "Accadono cose che sono come domande.
Passa un minuto, oppure anni e poi la vita risponde." (A. Baricco)

 non ha "insertRule", ad esempio, ma "addRule", e così via.
Avevo epurato il codice per renderlo minimo. Solo che in Firefox posso
tranquillamente modificare direttamente la regola di stile ed ogni
modifica è applicata immediatamente a tutti gli oggetti ad essa
associata, mentre in IE ho visto che non funziona. Dovrei modificare
lo stile associato singolarmante per ogni elemento. Comunque non ho
ancora avuto tempo di fare ricerche abbastanza approfondite, forse
cambiano solo le api. Appeno posso cercherò.
Grazie ancora.
--
Ciao
Blue

 Grazie ancora.
De nada.
-- 
~ "Solo i morti hanno visto la fine della guerra."
(Platone)

 Intanto butta un occhio al post di Cristiano, c'è un link utile.
Certamente.
--
Ciao
Blue