Leer xml por javascript en Joomla

bettu · 27 Noviembre 2011, 22:55 PM

Hola!

No tengo ni idea de páginas webs, he estado mirando por Internet y la verdad es que no entiendo nada. Me gustaría que me ayudarais sobre este tema. Vereis, tal y como dice el titulo quiero mostrar el contenido de varios xml en una pagina web hecha en Joomla con el editor JCE. Parece ser que podria ser posible con javascript, pero no entiendo ni fabaaa.

Estos archivos xml son los siguientes: AirPlayHistory.xml, AirPlayNext.xml y NowOnAir.xml. Los tres archivos me los genera automaticamente Jazler, lo único que quiero es mostrar estos archivos con la hora de emisión, nombre de artista y canción.

Adjunto el código que genera los tres archivos:

AirPlayHistory

Citar<?xml version="1.0" encoding="utf-8"?>
<Event status="happened">
<Song title="Physical">
<Artist name="Olivia Newton John" ID="338221">
</Artist>
<Info StartTime="21:44:11" JazlerID="4806" PlayListerID="" />
</Song>
<Song title="Be My Baby">
<Artist name="Vanessa Paradis" ID="336452">
</Artist>
<Info StartTime="21:47:47" JazlerID="1007" PlayListerID="" />
</Song>
<Song title="Can't Fight The Moonlight ">
<Artist name="Leann Rimes" ID="335842">
</Artist>
<Info StartTime="22:00:13" JazlerID="4624" PlayListerID="" />
</Song>
<Song title="I Love To Love">
<Artist name="Tina Charles" ID="336728">
</Artist>
<Info StartTime="22:11:09" JazlerID="1611" PlayListerID="" />
</Song>
<Song title="Da Ya Think I'm Sexy">
<Artist name="Rod Stewart" ID="336390">
</Artist>
<Info StartTime="22:25:06" JazlerID="1663" PlayListerID="" />
</Song>
</Event>

AirPlayNext

Citar<?xml version="1.0" encoding="utf-8"?>
<Event status="coming up">
<Song title="Llàgrimes al Cel (Tears in Heaven)">
<Artist name="Jofre Bardagí + La Puerta de los Sueños" >
</Artist>
<Info StartTime="22:47:53" JazlerID="3243" />
</Song>

<Song title="Stand!">
<Artist name="Sly + The Family Stone" >
</Artist>
<Info StartTime="22:52:20" JazlerID="2737" />
</Song>

<Song title="Ruido">
<Artist name="Despistaos" >
</Artist>
<Info StartTime="22:59:36" JazlerID="3846" />
</Song>

</Event>

NowOnAir

Citar<?xml version="1.0" encoding="utf-8"?>
<Schedule System="Jazler">
<Event status="happening" startTime="22:44:06" eventType="song">
<Announcement Display=""/>
<Song title="Nadie">
<Artist name="Malú">
</Artist>
<Jazler ID="2932"/>
<PlayLister ID=""/>
<Media runTime="00:03:37"/>
<Expire Time="22:47:43"/>
</Song>
</Event>
</Schedule>

Gracias por leer!

EFEX · 29 Noviembre 2011, 00:27 AM

Cita de: bettu en 27 Noviembre 2011, 22:55 PM
No tengo ni idea de páginas webs, he estado mirando por Internet y la verdad es que no entiendo nada.

Necesitas tener una idea de lo que estas haciendo, te dejo un ejemplo, lo hice con jquery y lee el archivo AirPlayHistory.xml mostrando por pantalla las canciones con el autor.

Código (php) [Seleccionar]


<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">
	p{
		background-color:#FFFBDB;
		padding:5px;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
		/*  Busca el archivo AirPlayHistory.xml */
		$.ajax({
			type: "GET",
			url: "AirPlayHistory.xml",
			dataType: "xml",
			success: function(xml) {
				/*  Al encontrarlo buscar el tag <song> e ir repiendo el proceso hasta llegar al final del archivo(bucle) */
				$(xml).find('Song').each(function(){
					/*  Tomar los valores dentro de title */
					var tittle = $(this).attr('title');
					/*  Buscar el tag <artist> y repetir el bucle */
					$(this).find('Artist').each(function(){
						/*  Tomar los valores de name */
						var artist = $(this).attr('name');
						/*  Por ultimo mostrar dentro de div.cancion */
						$('.cancion').append( "<p>Song:"+tittle+"<br>Artist:"+artist+"</p>" );
					});
				});
			}
		});			
	});
	</script>
</head>
<body>
	<div class="cancion"></div>
</body>
</html>

Si queres profundizar sobre el tema lee sobre HTML, CSS, javascript (JQUERY es una libreria de javascript, para agilizar un poco las cosas)

bettu · 4 Diciembre 2011, 14:56 PM

Holaa!

Siento muchísimo el retraso en contestar, cuestiones de trabajo no me han permitido mirar el foro.

Bueno, primeramente muchisimas gracias por el codigo proporcionado, he estado jugando un poco para que me mostrara más información adicional (por ejemplo, la hora en que fue emitida la cancion), pero no sé porque pero ahora no me funciona. ¿Podrías decirme que es lo que hago mal?

Ahí va el código para AirPlayHistory y AirPlayNext (que en realidad son lo mismo):

Código (php) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">
	p{
		background-color:#FFFBDB;
		padding:5px;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
		/*  Busca el archivo AirPlayHistory.xml */
		$.ajax({
			type: "GET",
			url: "AirPlayHistory.xml",
			dataType: "xml",
			success: function(xml) {
				/*  Al encontrarlo buscar el tag <song> e ir repiendo el proceso hasta llegar al final del archivo(bucle) */
				$(xml).find('Song').each(function(){
					/*  Tomar los valores dentro de title */
					var title = $(this).attr('title');
					/*  Buscar el tag <artist> y repetir el bucle */
					$(this).find('Artist').each(function(){
						/*  Tomar los valores de name */
						var artist = $(this).attr('name');
					});
					$(this).find('Info').each(function(){
						var time = $(this).attr('StartTime');
						/*  Por ultimo mostrar dentro de div.cancion */
						$('.cancion').append("<p>"+time+": "+artist+" - "+title+"</p>");
					});
				});
			}
		});			
	});
	</script>
</head>
<body>
	<div class="cancion"></div>
</body>
</html>

Y aquí el código para NowOnAir (cosa que el xml cambia un poco...):

Código (php) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">
	p{
		background-color:#FFFBDB;
		padding:5px;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
		/*  Busca el archivo NowOnAir.xml */
		$.ajax({
			type: "GET",
			url: "NowOnAir.xml",
			dataType: "xml",
			success: function(xml) {
				/*Buscar el tag <Event> e ir repitiendo el proceso hasta el final (bucle) */
				$(xml).find('Event').each(function(){
					/*Tomar los valores de startTime*/
					var startTime = $(this).attr('startTime');
					
					/*Buscar el tag <Song> y repetir bucle*/
					$(this).find('Song').each(function(){
					/*Tomar los valores de title*/
					var title = $(this).attr('title');
					
					/*Buscar el tag <Artist> y repetir bucle*/
					$(this).find('Artist').each(function(){
					/*Tomar los valores de name*/
					var artist = $(this).attr('name');
					
					/*Buscar el tag Expire y repetir bucle*/
					$(this).find('Expire').each(function(){
					var time = $(this).attr('Time');
					$('.cancion').append("<p>Inici: "+startTime+"<br>Artista: "+artist+"<br>Tema: "+title+"<br>Finalitza: "+time+"</p>");
					});
					});
					});
					});
				}
		});
	});
	</script>
</head>
<body>
	<div class="cancion"></div>
</body>
</html>

Gracias!!

EFEX · 4 Diciembre 2011, 19:23 PM

Hola, el error fue mio por no pensado/incluirlo antes... el error es por que las variables que se declaron dentro de una funcion solo son accesible a esa funcion:

Citar
var v1; // Esta es una variable global
function funcion1(){
   var v2; // Esta variable es visible solamente dentro de la funcion funcion1()
   // v1 Podemos seguir utilizando esta variable
}
function funcion2(){
   var v3; // // Esta variable es visible solamente dentro de la funcion funcion2()
   // v1 Podemos seguir utilizando esta variable
   // v2 Esta variable ya no es accesible
   function funcion3(){
      var v4; // Esta variable es visible solamente dentro de la funcion funcion3()
      // v1 Podemos seguir utilizando esta variable
      // v2 Esta variable ya no es accesible
      // v3 Podemos seguir utilizando esta variable
   }
}

Por lo que hay que declarar una variable Global para que pueda ser accesido a todas las demas funciones, en el ejemplo de AirPlayHistory, quedaria asi:

Código (php) [Seleccionar]


<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">
	p{
		background-color:#FFFBDB;
		padding:5px;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
		// 	Defino my variable global
		var myObj = {}; 
		$.ajax({
			type: "GET",
			url: "AirPlayHistory.xml",
			dataType: "xml",
			success: function(xml) {
				$(xml).find('Song').each(function(){
					//  Definimos el atributo tittle
					myObj.tittle = $(this).attr('title');
					$(this).find('Artist').each(function(){
						//  Definimos el atributo artist
						myObj.artist = $(this).attr('name');
					});
					$(this).find('Info').each(function(){
						//  Definimos el atributo time
						myObj.time = $(this).attr('StartTime');
					});
					//  Por ultimo lo mostramos :)
					$('.cancion').append( "<p>Song:"+myObj.tittle+"<br>Artist:"+myObj.artist+"<br>Time:"+myObj.time+"</p>" );
				});
			}
		});			
	});
	</script>
</head>
<body>
	<div class="cancion"></div>
</body>
</html>

bettu · 4 Diciembre 2011, 21:43 PM

Fantástico! Esto si que funciona!

Para mostrar dicho contenido he realizado lo siguiente: dicho código se guarda en un nuevo fichero html (en total 3 para cada uno de los xml) y se sube al servidor FTP donde se encuentren los archivos generados por Jazler. Posteriormente, en Joomla se añade uno o varios módulos del tipo Marco (Wraper) para que Joomla muestre la información a través de un archivo externo/adicional.

Nuevamente, muchísimas gracias (ahora me encuentro con un pequeño problema a perfilar, pero esto lo tendré que realizar desde Jazler).

Un saludo

bettu · 10 Diciembre 2011, 16:59 PM

Hola de nuevo!

Bueno, simplemente quiero recalcar la solución a lo que comenté anteriormente (por si alguien se encuentra con el mismo problema y no sabe como solucionarlo).

Cita de: bettu en 4 Diciembre 2011, 21:43 PM
(ahora me encuentro con un pequeño problema a perfilar, pero esto lo tendré que realizar desde Jazler).

El problema basicamente consiste en que los xml no funcionan si encuentran algun caracter de habla hispana (acentos, dieresis y estas cosas...). Hay dos soluciones que se pueden realizar desde Jazler: la primera (y la más pesada), es eliminar cada acento/dieresis de toda la base de datos de canciones que hay en el programa. Obviamente, cuanto más grande es la base de datos, más latoso será el trabajo (en mi caso son 5500 canciones).

Bien, la segunda solución es la que muestro en la siguiente imagen:

En la columna de la izquierda se introducen los caracteres que se quieren reemplazar y a la derecha cómo quieres que se muestren. Por ejemplo, si alguna canción posee la letra Ñ, yo querré que me lo reemplace a N (no os confundais, aunque el reemplazo de caracter esté dentro de la sección de RDS, también afecta a los archivos AirPlayHistory, AirPlayNext y NowOnAir.xml).

Muchas gracias por todo!

Test Foro de elhacker.net SMF 2.1

Leer xml por javascript en Joomla

bettu

EFEX

bettu

EFEX

bettu

bettu