duda con Javascript y XML

[malexis]

Saludos, les escribo por una idea que me ha llegado a la cabeza:

Es posible hacer que cuando se le de click a un link, javascript haga una pagina temporal con el diseno que yo desee y que el contenido que tenga sea traido de un xml.

Espero que me puedan ayudar, gracias.

[Panino5001]

Sí, es posible. Pero lo más lógico sería hacerlo con Ajax.

[malexis]

vaya vaya, lo que propones esta muy interesante, pero, tienes(n), alguna idea de como hacerlo.

[Panino5001]

Sí. Pero deberías colocar tus ejemplos y necesidades, porque la idea es dar cañas y enseñar a pescar, no servir pescado

[malexis]

jeje, claro, esa es la idea, pues aqui va un ejemplo de lo que tengo y lo que quiero hacer, lo primero es que tengo un archivo en javascript que tiene el codigo siguiente:

function Replace(totalValue,oldValue,newValue)
{
while(totalValue.indexOf(oldValue) > -1)
totalValue=totalValue.replace(oldValue,newValue);
return totalValue;
}

/* Aqui Traigo los Nodos del XML
(Parametros) TagNames:'XML Elemento' nodo:'Numero de fila de elemento' */

function getNode(TagName, node)
{
var currentNode = (node == null) ? xmlDoc.getElementsByTagName(TagName) :
items[node].getElementsByTagName(TagName);
if(currentNode.length > 0)
return currentNode[0].firstChild.nodeValue;
}

/* Cargando documento XML
(Parametros) rssFeed:'Archivo RSS' Body:'Layer para el cuerpo rss' Titulo:'Layer para el titulo rss' */

function ReadRSS(rssFeed, Body, Title)
{
rssTitle = document.getElementById(Title);
rssBody = document.getElementById(Body);

try
{
if (document.all)
{
var errorHappendHere = "Check Browser and security settings";
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
else
{
var errorHappendHere = "Aparentemente no se puede leer remotamente el xml via firefox, copiar el archivo en el servidor";
xmlDoc = document.implementation.createDocument("","",null) ;
}

xmlDoc.async=false;
xmlDoc.load(rssFeed);

items=xmlDoc.getElementsByTagName('noticia');
SetRSSTemplates();
}

catch(e)
{
rssTitle.innerHTML = 'Error occured';
rssBody.innerHTML = 'Thrown Error:'+e.message+"<br/>Note: "+errorHappendHere;
}
}

/* setiando el template de html */

function SetRSSTemplates()
{
if (rssBody)
{
var buffer = "";
for(var i=0; i< items.length; i++)
{
if (document.all)
{
var output = Replace(rssBody.innerHTML,"(::Link::)",getNode('li nk',i));
}
else
{
var output = Replace(rssBody.innerHTML,"%28::Link::%29",getNode ('link',i));
}
output = Replace(output,"(::Title::)",getNode('titulo',i));
output = Replace(output,"(::Pubdate::)",getNode('fecha',i)) ;
output = Replace(output,"(::Description::)",getNode('descri pcion',i));
buffer+=output;
}
rssBody.innerHTML = buffer;
}

if (rssTitle)
{
var output = Replace(rssTitle.innerHTML,"(::Title::)",getNode(' title'));
if (document.all)
{
output = Replace(output,"(::Link::)",getNode('link'));
}
else
{
output = Replace(output,"%28::Link::%29",getNode('link'));
}
output = Replace(output,"(::Description::)",getNode('descri ption'));
rssTitle.innerHTML = output;
}
}

window.onload = function()
{
ReadRSS('noticias.xml','rssBodyTemplate','rssTitle Template');

}
--------------------------------------------------------------------------------
en una pagina html pongo el siguiente codigo:

<script language="JavaScript" src="rss.js" type="text/javascript"></script>

<div id="rssTitleTemplate">
<div align="left">(::Title::)<br/>

<a href="(::Link::)"></a></div>
<a href="(::Link::)">
<h1 align="left">(::Description::)</h1></a> </div>
<div id="rssBodyTemplate">
<div align="left"><a href="(::Link::)"><b>(::Title::)</b></a>
<b>(::Pubdate::)</b>
<br/>
<font size="-1">(::Description::)</font>

</div>
<hr noshade="noshade"/>
<br/>
</div>
--------------------------------------------------------------------------------------

Esto me da como resultado la siguiente imagen:



lo que me interesa es que cuando se le de click a uno de esos links, se abra una pagina temporal en el cliente que tenga los elementos deseados del archivo xml con e que estoy trabajando en el que hay elementos que no muestro en la lista de la imagen, por ejemplo imagen, la noticia completa, etc.

Espero que tengan la idea y que me puedan ayudar, Gracia..

[Panino5001]

Bueno, ya casi tenés todo hecho. Sólo faltaría que coloques un xml de ejemplo y el html que querés mostrar al hacer click.

[malexis]

<?xml version="1.0" standalone="yes"?><rss version="2.0">
<channel><title>- Noticias</title><link>#</link><description>Noticias de interes</description>
<noticias>
<noticia>
<fecha>19/02/2008</fecha>
<titulo>Aqui va el titulo de la noticia que lo habras visto en la imagen</titulo>
<descripcion>Aqui va una descripcion de la noticia, que eso es lo que estas viendo en la imagen que puse anteriormente</descripcion>
<mensaje>
Aqui va la noticia completa que quiero mostrar
</mensaje>
<link>Aqui va el link que llamaria el codigo en este caso de ajax</link>
<image>../noticiasxml/idac1.jpg</image>
</noticia>
</noticias>
</channel>
</rss>

Bueno, este es el xml, lo de la pagina a cual llevare el resultado no se, ahi es que estoy trancado, digamos que es una pagina presideñada. la cual va a tener como contenido los elementos del nodo al que yo le haga click en la lista de todas las noticias.

[Panino5001]

En realidad te sugería el uso de AJAX para crear el intérprete xml, pero ya que usás XML DOM, te pongo un ejemplo con esa misma técnica:
El xml

Código PHP:

  <?xml version="1.0" standalone="yes"?><rss version="2.0">
<channel><title>- Noticias</title><link>#</link><description>Noticias de interes</description>
<noticias>
<noticia>
<fecha>19/02/2008</fecha>
<titulo>Aqui va el titulo de la noticia que lo habras visto en la imagen</titulo>
<description>Aqui va una descripcion de la noticia, que eso es lo que estas viendo en la imagen que puse anteriormente</description>
<mensaje>
Aqui va la noticia completa que quiero mostrar
</mensaje>
<link>#</link>
<image>../noticiasxml/idac1.jpg</image>
</noticia>
<noticia>
<fecha>19/02/2008</fecha>
<titulo>Otra noticia</titulo>
<description>La síntesis de la otra noticia</description>
<mensaje>
Aqui va la noticia completa que quiero mostrar
</mensaje>
<link>#</link>
<image>../noticiasxml/idac1.jpg</image>
</noticia>
</noticias>
</channel>
</rss>  

El intérprete:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function Replace(totalValue,oldValue,newValue)
{
while(totalValue.indexOf(oldValue) > -1)
totalValue=totalValue.replace(oldValue,newValue);
return totalValue;
}
 
/* Aqui Traigo los Nodos del XML
(Parametros) TagNames:'XML Elemento' nodo:'Numero de fila de elemento' */
 
function getNode(TagName, node)
{
var currentNode = (node == null) ? xmlDoc.getElementsByTagName(TagName) :
items[node].getElementsByTagName(TagName);
if(currentNode.length > 0)
return currentNode[0].firstChild.nodeValue;
}
/* Cargando documento XML
(Parametros) rssFeed:'Archivo RSS' Body:'Layer para el cuerpo rss' Titulo:'Layer para el titulo rss' */
 
function ReadRSS(rssFeed, Body, Title)
{
rssTitle = document.getElementById(Title);
rssBody = document.getElementById(Body);
 
try
{
if (document.all)
{
var errorHappendHere = "Check Browser and security settings";
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
else
{
var errorHappendHere = "Aparentemente no se puede leer remotamente el xml via firefox, copiar el archivo en el servidor";
xmlDoc = document.implementation.createDocument("","",null) ;
}
 
xmlDoc.async=false;
xmlDoc.load(rssFeed);
 
items=xmlDoc.getElementsByTagName('noticia');
SetRSSTemplates();
}
 
catch(e)
{
rssTitle.innerHTML = 'Error occured';
rssBody.innerHTML = 'Thrown Error:'+e.message+"<br/>Note: "+errorHappendHere;
}
}
 
/* setiando el template de html */
 
function SetRSSTemplates()
{
if (rssBody)
{
var buffer = "";
for(var i=0; i< items.length; i++)
{
if (document.all)
{
var output = Replace(rssBody.innerHTML,"(::Link::)","javascript:mostrar('"+getNode('titulo',i)+"','"+getNode('image',i)+"','"+getNode('mensaje',i)+"')");
}
else
{
var output = Replace(rssBody.innerHTML,"%28::Link::%29","javascript:mostrar('"+getNode('titulo',i)+"','"+getNode('image',i)+"','"+getNode('mensaje',i)+"')");
}
output = Replace(output,"(::Title::)",getNode('titulo',i));
output = Replace(output,"(::Pubdate::)",getNode('fecha',i)) ;
output = Replace(output,"(::Description::)",getNode('description',i));
buffer+=output;
}
rssBody.innerHTML = buffer;
}
 
if (rssTitle)
{
var output = Replace(rssTitle.innerHTML,"(::Title::)",getNode('title'));
output = Replace(output,"(::Description::)",getNode('description'));
rssTitle.innerHTML = output;
}
}
function mostrar(titulo,imagen,nota){
var v=window.open('');
v.document.open();
v.document.write('<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>'+titulo+'</title></head><body><h1>'+titulo+'</h1><p align="left"><img src="'+imagen+'" width="100" hspace="5" vspace="5" align="left" />'+nota+'</p></body></html>');
v.document.close();
}
 
window.onload = function()
{
ReadRSS('noticias.xml','rssBodyTemplate','rssTitleTemplate');
 
}
</script>
</head>
 
<body>
<div id="rssTitleTemplate">
<div align="left">(::Title::)<br/>
 
</div>
<h1 align="left">(::Description::)</h1> </div>
<div id="rssBodyTemplate">
<div align="left"><a href="(::Link::)"><b>(::Title::)</b></a>
<b>(::Pubdate::)</b>
<br/>
<font size="-1">(::Description::)</font>
 
</div>
<hr noshade="noshade"/>
<br/>
</div>
</body>
</html> 
  

Finalmente, el diseño de la vista completa podrás modificarlo cambiando la función mostrar.

[malexis]

Gracias camarada!!!, lo voy a probar y luego te digo si lo pude lograr correctamente.

Saludos y gracias nuevamente.

Hasta luego.

[ingeneyro]

yo tambien te recomiendo el ajax es mas facil y mas rapido ademas cuando das click en el link que deseses solo carga la pagina q insertas y no se refresquea toda

usa este metodo [AjaxPro.AjaxMethod()]
antes de hacer tu fincion de la pagina
y ya la mandas llamar.

[malexis]

es posible que llegue a esa solucion camarada, pero primeramente me gustaria ver el resultado que me dio nuestro camarada Panino5001, me funciona bien hasta un pongo, he mirado el codigo y no encuentro por que no me funciona el evento para abrir la pagina con el contenido. Se que lo esta leyendo, por que lo veo en la barra inferior pero no abre. Incluso, dividi el codigo que me diste para la pagina en dos partes y no abre. Que podria ser?



Gracias ingeneyro por la recomendacion.

[Panino5001]

Asegurate de hacer la prueba con los 2 archivos como te los pasé. Yo lo probé en Explore 6, 7 y en ópera y firefox y en todos funciona correctamente. Funciona en base a window.open (fijate que la configuración de tu navegador permita popups, si no habrá que modificar el código para que abra en un iframe o para que sobreescriba la ventana actual).

[malexis]

Ya me funciona niiiitido, hasta ahora solo me esta funcionando en IE, pero que mas da, luego vere que podria ser, ahora me queda darle un poco de diseño y eso, Gracias camarada, Eres un guru.

Saludos.
Cuidate