adding XML weather feed to an HTML page - HTML Forums

amerikaner1999 · 03-30-2006, 06:59 PM

I want to add an XML weather feed to an HTML page.

The amount of tutorials for the beginners seem very sparse based on my google searches.

This is the code I used:

<div align="center"><xml id="note" src="http://informer.gismeteo.ru/xml/27581_1.xml"></xml></div>

<tr>
<td><span datafld="TEMPERATURE"></span></td>
<td><span datafld="TOWN"></span></td>
</tr>
</table>
</div>

Nothing comes up in the page except the tables. What am I doing wrong?

bobfunland · 03-30-2006, 09:05 PM

If I'm not mistaken, html has no xml tag and usage of such will be ignored by most browsers. To do what you want would likely require at least one of the following: iframe, scripts, server side programming, etc. Somebody more knowledgeable than me can fill you in on the rest.

amerikaner1999 · 03-30-2006, 11:27 PM

oh dear , sounds a lot more complicated than i had anticipated.

Should I have started out with an .xhtml page? I'm using dreamweaver

bendman · 03-31-2006, 04:07 AM

ok, I made a script that should do what you want (I added more fields than you mentioned so you can see how it works). You need to run it on a server that supports php (most do, you should be ok), and javascript needs to be turned on (usually is). The body section of your HTML file would look something like this, don't forget the "<body onload=...>"

HTML Code:

<body onload='getData("xmlfeed.php", "http://informer.gismeteo.ru/xml/27581_1.xml")'>
<script language='javascript'>
function getData(dataSrc, urlSrc) {
	if (window.ActiveXObject){
		XMLHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) {
		XMLHttpObj = new XMLHttpRequest();
	}
	if (XMLHttpObj) {
		XMLHttpObj.onreadystatechange = function() {
			if (XMLHttpObj.readyState == 4) {
				try {
					if (XMLHttpObj.status == 200) {
						var XMLData = (new DOMParser()).parseFromString(XMLHttpObj.responseText, "text/xml");
						removeWhiteSpace(XMLData);
						var weatherTable = document.getElementById('weathertable');
						var reportNode = XMLData.firstChild.firstChild;
						while (reportNode) {
							townNode = reportNode.firstChild;
							while (townNode) {
								townIndex = '<td>' + townNode.attributes[0].nodeValue + '<\/td>';
								forecastNode = townNode.firstChild;
								while (forecastNode) {
									forecastTempMin = '<td>' + forecastNode.childNodes[2].attributes[1].nodeValue + '<\/td>';
									forecastTempMax = '<td>' + forecastNode.childNodes[2].attributes[0].nodeValue + '<\/td>';
									forecastYear = '<td>' + forecastNode.attributes[2].nodeValue + '<\/td>';
									forecastMonth = '<td>' + forecastNode.attributes[1].nodeValue + '<\/td>';
									forecastDay = '<td>' + forecastNode.attributes[0].nodeValue + '<\/td>';
									forecastHour = '<td>' + forecastNode.attributes[3].nodeValue + '<\/td>';
									weatherTable.innerHTML += '<tr>' + townIndex + forecastTempMin + forecastTempMax + forecastHour + forecastDay + forecastMonth + forecastYear + '<\/tr>\n';
									forecastNode = forecastNode.nextSibling;
								}
								townNode = townNode.nextSibling;
							}
							reportNode = reportNode.nextSibling;
						}
					} else {
						var errorMsg = '\'' + XMLHttpObj.status + ' Error\' for file ' + dataSrc;
						alert(errorMsg);
					}
				} catch(e) {
				}
			}
		};
		dataSrc = dataSrc + '\?urlsrc\=' + urlSrc;
		XMLHttpObj.open("GET", dataSrc, true);
		XMLHttpObj.send(null);
	}
}

function removeWhiteSpace(xml) {
	var loopIndex;
	for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++) {
		var currentNode = xml.childNodes[loopIndex];
		if (currentNode.nodeType == 1) {
			removeWhiteSpace(currentNode);
		}
		if (((/^\s+$/.test(currentNode.nodeValue))) && (currentNode.nodeType == 3)) {
			xml.removeChild(xml.childNodes[loopIndex--]);
		}
	}
}
</script>

<table id='weathertable'>
	<tr>
		<td>Town Index</td>
		<td>Minimum</td>
		<td>Maximum</td>
		<td>Hour</td>
		<td>Day</td>
		<td>Month</td>
		<td>Year</td>
	</tr>
</table>

</body>

and then you need to upload this file into the same directory as your HTML file and name it "xmlfeed.php" Keep in mind that because this file is serverside you will only be able to view the page online, not on your hard-drive.

PHP Code:


			
<?php

$xmlfilestring = implode('', file($_GET['urlsrc']));

echo $xmlfilestring;

?>

To view an example of what this code outputs, go to http://bendman.unssfree.com/xmlfeed.html.

A good tutorial about how to view XML files in pages is at http://www.w3schools.com/dom/default.asp, and for more information on exactly what I did to get the file into the page, you can look at this post (the only difference is that it's in PHP here, but ASP there, the principles are the same).

Hope this helps!

bendman