CSS Codes
CSS Layouts
Results 1 to 1 of 1

Thread: How to update several divs with RSS Feeds using javascript

  1. 07-05-2010, 07:29 PM #1
    jefferson
    jefferson is offline New Comer (less than 5 posts)
    Join Date
    Jul 2010
    Location
    In Mexico
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to update several divs with RSS Feeds using javascript

    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:
    Code:
    <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:
    Code:
    <?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");
}
?>
    Last edited by jefferson; 07-05-2010 at 07:37 PM.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules