xslt e javascript

**Simpz** · 23-04-2007, 11:07

Ciao a tutti,
ho un piccolo problema... vorrei mettere del codice javascript (quello del mouseover e mouseout) in un xsl ma se dopo il tag <script> metto il commento <!-- l'html, chiaramente, mi esce senza la porzione di codice javascript.
se non metto i commenti, chiaramente anche qui, la trasformazione xsl si inceppa...

come posso fare?

grazie a tutti
simone

**Simpz** · 24-04-2007, 10:33

Mi autorispondo...

Per mettere codice javascript in un XSLT senza subire una trasformazione su quel codice, quindi copiandolo pari pari sulla pagina xhtml risultante bisogna incorporarlo in un blocco <[CDATA[ ]]> in questa maniera:

codice:

<script language="JavaScript" type="text/JavaScript">
<![CDATA[ <!--
          function ...

....

//--> ]]>
</script>

Cià!

**luke1979** · 02-05-2007, 10:46

Ciao, ho visto che tu hai avuto lo stesso mio prblema per inserire il codice di gestione di eventi del mouse dovendo inserire javascript in un xsl.
Ho fatto come dici tu, ma seppur il codice html prodotto mi sembra giusto quando visualizzo il risultato dell'xsl facendo col tasto destro del mouse sulla pagina l'opzione html, IL CODICE JAVSCRIPT ALL'ONCLICK SUL BOTTONE "elenco_cities" CREATO NEL TEMPLATE MATCH="city" DELL'XSL NON VIENE RICHIAMATO.
SE TI RIPORTO IL CODICE QUA SOTTO POTRESTI DARMI UNA MANO?

CODICE XSL

codice:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/REC-html40">

<xsl:output method="xml" version="1.0" omit-xml-declaration="yes" indent="no" media-type="text/html" />
	
	<xsl:template match="/">
		<html>
			<head>
				<style type="text/css">
					#form_modifica_ristorante{
						color:blue;
						text-width:bold;
					}
					#nome{
						position:absolute;
						left:170px;
						width:35%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}
					#via{
						position:absolute;
						left:170px;
						width:35%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}
					#numciv{
						position:absolute;
						left:170px;
						width:35%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}
					#giorno{
						color:red;
						background-color:#99FF66;
					}
					#mese{
						color:red;
						background-color:#99FF66;
					}
					#anno{
						color:red;
						background-color:#99FF66;
					}
					#elenco_cities{
						font-size:10px;
						color:white;
						background-image: url(../images/piccolo_sfondo.jpg);
						border:1px solid red;
					}
					#city{
						position:absolute;
						left:170px;
						width:35%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}
					#area{
						position:absolute;
						left:170px;
						width:35%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}
					#telefono{
						position:absolute;
						left:170px;
						width:35%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}	
					#sito{
						position:absolute;
						left:170px;
						width:35%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}
					#numcop{
						position:absolute;
						left:170px;
						width:35%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}
					#titolo_modifica_ristorante{
						text-align:center;
						color:violet;
						background-color:white;
						text-decoration:underline;
					}
					#titoletto_carte{
						background-color:#99FF66;
						color:blue;
						padding:2px;
						border:1px solid white;
						text-align:center;
					}
					#carte{
						position:absolute;
						top:75%;
						padding:5px;
						border:1px solid white;
						background-color:#33FFCC;
						color:blue;
					}
					#tipologia{
						position:absolute;
						left:75%;
						top:20%;
						padding:5px;
						border:1px solid white;
						background-color:#33FFCC;
						color:blue;
					}
					#titoletto_tipologia{
						background-color:#99FF66;
						color:blue;
						padding:2px;
						border:1px solid white;
						text-align:center;
					}
					#file{
						position:absolute;
						left:170px;
						width:40%;
						color:red;
						background-image: url(../images/piccolo_sfondo.jpg);
					}
					#invio_modifica_ristorante{
						position:absolute;
						right:50px;
						bottom:30px;
						background-color:green;
						color:white;
					}
				</style>

				
				<script type="text/JavaScript" language="JavaScript">
					<![CDATA[ <!--alert("w");
					//OCCORRE RENDERE QUESTA PARTE FUNZIONANTE SU TUTTI I BROWSER E NON SOLO SU IE (GUARDARE SUL LIBRO DI XML E PHP)	
					var xml = new ActiveXObject("Microsoft.XMLDOM");
					xml.async = false;
					xml.load("xml/cities.xml");
					var lista_city = xml.documentElement.getElementsByTagName("city");
					var property;
					var new_option;
					var elemento_select;
					function elenco_city(){
						elemento_select = document.getElementById("city");
						elemento_select.options.length = 0;
						for (var i = -1; i < lista_city.length; i++){
							if (i == -1){
								new_option = new Option("Scegli da questo elenco","",false,false);
								elemento_select.options[elemento_select.options.length] = new_option;
								new_option = new Option("","",false,false);
								elemento_select.options[elemento_select.options.length] = new_option;
							}
							else{
								property = lista_city.item(i).getElementsByTagName("nome").item(0).text;
								new_option = new Option(property,property,false,false);
								elemento_select.options[elemento_select.options.length] = new_option;
							}
						}
						elemento_select.style.backgroundColor = "lightblue";
					}
					function elenco_aree(){
						var numero_aree = 0;
						elemento_select = document.getElementById("area");
						elemento_select.options.length = 0;
						//VEDO QUALE CITTa e' SELEZIONATA NEL FORM NELLA SELECT A TENDINA (dove i primi due option non sono delle citta e non vanno considerati)
						var numero_city_selezionata = document.getElementById("city").selectedIndex;
						if ((numero_city_selezionata != 0) && (numero_city_selezionata != 1)){
							var city_selezionata = document.getElementById("city").options[numero_city_selezionata].text;
							//IN BASE A QUALE CITTa E' SELEZIONATA VADO A CERCARE IL SUO NUMERO DI AREE NELLA LISTA DELLE CITTa CHE AVEVO RICAVATO DAL FILE XML
							for (var i = 0; i < lista_city.length; i++){
								if(lista_city.item(i).getElementsByTagName("nome").item(0).text == city_selezionata){
									numero_aree = lista_city.item(i).getElementsByTagName("numero_aree").item(0).text;
									break;
								}
							}
							numero_aree++;
							for(var i = 1; i < numero_aree; i++){
								new_option = new Option(i,i,false,false);
								elemento_select.options[elemento_select.options.length] = new_option;	
							}
						}
						elemento_select.style.backgroundColor = "lightblue";
					}		
					//--> ]]>	         	
				</script>
				
			</head>
			<body bgcolor="#99FF99">
				<DIV ID="titolo_modifica_ristorante">
					MODIFICA LE INFORMAZIONI DEL RISTORANTE
				</DIV>
				<FORM id="form_modifica_ristorante" METHOD="post" ACTION="modifica_ristorante" TARGET="iframe_content" enctype= "multipart/form-data">
					<xsl:apply-templates />
					<INPUT id = 'invio_modifica_ristorante' TYPE='submit' VALUE='Modifica' />
				</FORM>
			</body>
		</html>
	</xsl:template>
	
	<xsl:template match="nome">
		<xsl:variable name="nome" select="." />
		<INPUT TYPE="hidden" name="vecchio_nome" id = "{$nome}" value="{$nome}" />

		*Nome: <INPUT TYPE="text" name="nome" id = "nome" value="{$nome}" />

	</xsl:template>	
	
	<xsl:template match="via">
		<xsl:variable name="via" select="." />
		*Via: <INPUT TYPE="text" name="via" id="via" value="{$via}" />

	</xsl:template>	
	
	<xsl:template match="area">
		*Area:
		<SELECT NAME="area" ID="area"><option value="3"/>3
		</SELECT>
	</xsl:template>	
	
	<xsl:template match="numciv">
		<xsl:variable name="numciv" select="." />
		*Numero civico: <INPUT TYPE="text" name="numciv" id="numciv" value="{$numciv}" />

	</xsl:template>	
	
	<xsl:template match="city">
		<xsl:variable name="city" select="." />
		<INPUT TYPE="hidden" name="vecchia_city" id = "vecchia_city" value="{$city}" />
		*City:
		<SELECT NAME="city" ID="city"  onchange="elenco_aree()">
		</SELECT>
		<INPUT TYPE="button" value = "------>" name = "elenco_cities" ID="elenco_cities" onclick="elenco_city()"/>

	</xsl:template>	
	
	<xsl:template match="telefono">
		<xsl:variable name="telefono" select="." />
		
*Telefono: <INPUT TYPE="text" name="telefono" id="telefono" value="{$telefono}" />

	</xsl:template>	
	
	<xsl:template match="sito">
		<xsl:variable name="sito" select="." />
		Sito: <INPUT TYPE="text" name="sito" id="sito" value="{$sito}" />

	</xsl:template>	
	
	<xsl:template match="numcop">
		<xsl:variable name="numcop" select="." />
		*Numero coperti: <INPUT TYPE="text" name="numcop" id="numcop" value="{$numcop}" />

	</xsl:template>	
	
	<xsl:template match="carte">
		<DIV ID='carte'>
			<DIV ID='titoletto_carte'>
				*Carte accettate per il pagamento
			</DIV>
			<xsl:if test="contains(.,'nessuna')">
				<INPUT TYPE='checkbox' name='nessuna' value='nessuna' checked='checked'/>Nessuna
			</xsl:if>
			<xsl:if test="not(contains(.,'nessuna'))">
				<INPUT TYPE='checkbox' name='nessuna' value='nessuna' />Nessuna
			</xsl:if>
			<xsl:if test="contains(.,'visa')">
				<INPUT TYPE='checkbox' name='visa' value='visa' checked='checked'/>Visa
			</xsl:if>
			<xsl:if test="not(contains(.,'visa'))">
				<INPUT TYPE='checkbox' name='visa' value='visa' />Visa
			</xsl:if>
			<xsl:if test="contains(.,'bancomat')">
				<INPUT TYPE='checkbox' name='bancomat' value='bancomat' checked='checked'/>Bancomat
			</xsl:if>
			<xsl:if test="not(contains(.,'bancomat'))">
				<INPUT TYPE='checkbox' name='bancomat' value='bancomat' />Bancomat
			</xsl:if>
			<xsl:if test="contains(.,'mastercard')">
				<INPUT TYPE='checkbox' name='mastercard' value='mastercard' checked='checked'/>Mastercard
			</xsl:if>
			<xsl:if test="not(contains(.,'mastercard'))">
				<INPUT TYPE='checkbox' name='mastercard' value='mastercard' />Mastercard
			</xsl:if>
			<xsl:if test="contains(.,'postapay')">
				<INPUT TYPE='checkbox' name='postapay' value='postapay' checked='checked'/>Postapay
			</xsl:if>
			<xsl:if test="not(contains(.,'postapay'))">
				<INPUT TYPE='checkbox' name='postapay' value='postapay' />Postapay
			</xsl:if>	
			<xsl:if test="contains(.,'american')">
				<INPUT TYPE='checkbox' name='american' value='american' checked='checked'/>American
			</xsl:if>
			<xsl:if test="not(contains(.,'american'))">
				<INPUT TYPE='checkbox' name='american' value='american' />American
			</xsl:if>
		</DIV>

	</xsl:template>		
	
	<xsl:template match="foto">
		<xsl:variable name="foto" select="." />
		<INPUT TYPE='hidden' name='vecchia_foto' id='vecchia_foto' value="{$foto}" />

		Foto: <INPUT TYPE='file' name='file' id='file' />


	</xsl:template>	
	
	<xsl:template match="tipologia">
		<DIV ID='tipologia'>
			<DIV ID='titoletto_tipologia'>
				*Tipologia
			</DIV>
			<xsl:if test="contains(.,'etnico')">
				<INPUT TYPE='radio' name='tipologia' value='etnico' checked='checked'/>Etnico

			</xsl:if>
			<xsl:if test="not(contains(.,'etnico'))">
				<INPUT TYPE='radio' name='tipologia' value='etnico'/>Etnico

			</xsl:if>
			<xsl:if test="contains(.,'winbar')">
				<INPUT TYPE='radio' name='tipologia' value='winbar' checked='checked'/>Win bar

			</xsl:if>
			<xsl:if test="not(contains(.,'winbar'))">
				<INPUT TYPE='radio' name='tipologia' value='winbar'/>Win bar

			</xsl:if>	
			<xsl:if test="contains(.,'vegetariano')">
				<INPUT TYPE='radio' name='tipologia' value='vegetariano' checked='checked'/>Vegetariano

			</xsl:if>
			<xsl:if test="not(contains(.,'vegetariano'))">
				<INPUT TYPE='radio' name='tipologia' value='vegetariano'/>Vegetariano

			</xsl:if>
			<xsl:if test="contains(.,'winbar')">
				<INPUT TYPE='radio' name='tipologia' value='tradizionale' checked='checked'/>Tradizionale

			</xsl:if>
			<xsl:if test="not(contains(.,'winbar'))">
				<INPUT TYPE='radio' name='tipologia' value='tradizionale'/>Tradizionale

			</xsl:if>
			<xsl:if test="contains(.,'internazionale')">
				<INPUT TYPE='radio' name='tipologia' value='internazionale' checked='checked'/>Internazionale

			</xsl:if>
			<xsl:if test="not(contains(.,'internazionale'))">
				<INPUT TYPE='radio' name='tipologia' value='internazionale'/>Internazionale

			</xsl:if>
		</DIV>
	</xsl:template>	
</xsl:stylesheet>


CODICE DELL'XML TRASFORMATO IN HTML


	codice:
	<?xml version="1.0" encoding="UTF-8"?>
<elenco_city>
  <city>
    <nome>bergamo</nome>
    <numero_aree>5</numero_aree>
    <mappa>bergamo.jpg</mappa>
  </city>
  <city>
    <nome>levate</nome>
    <numero_aree>8</numero_aree>
    <mappa>levate.jpg</mappa>
  </city>
</elenco_city>

Discussione: xslt e javascript

Strumenti discussione

Ricerca discussione

Visualizza

xslt e javascript

Permessi di invio