PDA

View Full Version : How to update several divs with RSS Feeds using javascript



jefferson
07-05-2010, 07:29 PM
Hi everyone, I hope someone can help me with an issue with javascript code. I'm trying to make a page that loads some divs with content from a few rss feeds from the same site. Everything works ok until the original div content is updated using getElementById("divID").innerHTML because some divs load content from a different feed than the one they should be doing it, sometimes it loads nothing, sometimes content is repeated, etc. Everytime I hit refresh in the browser something different is displayed. When I execute the code with one div and one function that loads its content it works ok. When I execute the code with more the problem appears again.

Is there a particular order in which functions should be ordered? or maybe a special line that I should include when updating different divs?

By the way, I'm begginer at javascript so maybe something very simple is the problem. Sorry for the inconvenience if that is the case.

tHANKS everyone :)

Here is the code used:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="IndexStyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>This is a test, althou the functions will be very usefull</p>
<h1>Here should be quote: </h1>
<div id="encabezado">**FRASE**</div>
<h1>Next is the question: </h1> <div id="panel-preguntaDelDia1">**PREGUNTA**</div>

<h3>The next feed is called&quot;Columna reciente&quot;:</h3>
<div id="panel-columnaReciente">***COLUMNA RECIENTE***</div>

<h3>The next feed is &quot;Otras columnas&quot;</h3>
<div id="panel-columnaOtros">otras columnas</div>

<script>
function loadXMLDoc(url,panelfuncion)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=panelfuncion;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

function LlenarFrase()
{
loadXMLDoc("lectorRSS.php?q=frase",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("encabezado").innerHTML=xmlhttp.responseText;}
});
}

function LlenarPregunta()
{
loadXMLDoc("lectorRSS.php?q=pregunta",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("panel-preguntaDelDia1").innerHTML=xmlhttp.responseText; }
});
}

function LlenarColumnaReciente()
{
loadXMLDoc("lectorRSS.php?q=columnaReciente",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("panel-columnaReciente").innerHTML=xmlhttp.responseText; }
});
}

function LlenarColumnaOtros()
{
loadXMLDoc("lectorRSS.php?q=columnaOtros",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("panel-columnaOtros").innerHTML=xmlhttp.responseText; }
});
}

LlenarFrase();
LlenarPregunta();
LlenarColumnaReciente();
LlenarColumnaOtros();

</script>
</body>


And the php script used is this:


<?php
//Obtener la variable de la URL para saber que panel esta llamando a la función
$panel = $_GET["q"];

//Condicional que revisa la variable panel para ver que Feed utilizará el resto de la función y lo asignara a xmlFeed
switch ($panel)
{
case "frase":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=8");
break;
case "pregunta":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=7");
break;
case "noticias":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=2");
break;
case "perfiles":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=3");
break;
case "movilidadReciente":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=12");
break;
case "movilidadOtros":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=5");
break;
case "columnaReciente":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=11");
break;
case "columnaOtros":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=6");
break;
case "agenda":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=4");
break;
case "clasificados":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=9");
break;
case "sondeos":
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=10");
break;
default:
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=2");
}

$xmlDoc = new DOMDocument();
$xmlDoc->load($xmlFeed);

//Obtiene los datos o elementos de "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')->item(0)->childNodes->item(0)->nodeValue;

$x=$xmlDoc->getElementsByTagName('item');

//Condicional que obtiene e imprime los valores del Feed dependiendo del panel (variable $panel) que este llamando a la funcion
switch ($panel)
{
case "frase":
$item_desc=$x->item(0)->getElementsByTagName('description')->item(0)->childNodes->item(0)->nodeValue;
echo ($item_desc);
break;
case "pregunta":
$item_title=$x->item(0)->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item(0)->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
echo ("<img src='index-imagenes/paneles/preguntaDelDia.jpg' id='imgPreguntaSemanal' />");
echo ("<div id='preguntaSemanal'>" . $item_title . "</div>");
echo ("<a href='" . $item_link . " id='link-preguntaDelDia'><img src='index-imagenes/paneles/opinaAqui.jpg' align='right' /></a>");
break;
case "noticias":
echo ("NOTICIAS - Aun no...");
break;
case "perfiles":
echo ("PERFILES - Aun no...");
break;
case "movilidadReciente":
$item_title=$x->item(0)->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item(0)->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
$item_desc=$x->item(0)->getElementsByTagName('description')->item(0)->childNodes->item(0)->nodeValue;
echo ("<a href='" . $item_link . "><h1>" . $item_title . "</h1></a>");
echo ($item_desc . "<a href='" . $item_link . "'><strong>...Leer mas</strong></a>");
break;
case "movilidadOtros":
echo ("<table class='tabla-celdaUnRenglon'>");
for ($i=0;$i<=2;$i++)
{
$item_title=$x->item($i)->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
echo ("<tr><td><a href='" . $item_link . "'></a></td><tr>");
}
echo ("</table>");
break;
case "columnaReciente":
$item_title=$x->item(0)->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item(0)->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
$item_desc=$x->item(0)->getElementsByTagName('description')->item(0)->childNodes->item(0)->nodeValue;
echo ("<a href='" . $item_link . "><h1>" . $item_title . "</h1></a>");
echo ($item_desc . "<a href='" . $item_link . "'><strong>...Leer mas</strong></a>");
break;
case "columnaOtros":
echo ("<table >");
for ($i=0;$i<=2;$i++)
{
$item_title=$x->item($i)->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
echo ("<tr><td><a href='" . $item_link . "'>" . $item_title . "</a></td></tr>");
}
echo ("</table>");
break;
case "agenda":
echo ("AGENDA - Aun no...");
break;
case "clasificados":
echo ("<table class='tabla-celdaUnRenglon'>");
for ($i=0;$i<=9;$i++)
{
$item_title=$x->item($i)->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
echo ("<tr><td><a href='" . $item_link . "'></a></td><tr>");
}
echo ("</table>");
break;
case "sondeos":
$item_title=$x->item($i)->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
echo ("<a href='" . $item_link . "'>" . $item_title . "</a>");
break;
default:
$xmlFeed = ("http://labrujula.ens.uabc.mx/index.php?option=com_rd_rss&id=2");
}
?>