I'm struggling. I'm trying to make a website using the google weather API. Here's where I'm at:
1) I've got the PHP code working, and it gets the current temperature & images showing the forecast for the next 4 days. Simple enough
2) I decided I wanted to have a map which you could hover over to find out the temperature/forecast in seperate divs. I tried this with php then realised you can't do that without refreshing the whole page.
3) I realised I was probably going to have to use AJAX. I've managed to get the AJAX to do a httprequest and return all of the content in the PHP file, but what I really want to do is get the AJAX to call the PHP function, let it execute, then return the data for theat country/city.
I got stuck here. I'll show you what I have:
HTML FILE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="ajax.js">
</script>
<title>Weather HTML</title>
</head>
<body>
<p onmouseover='MakeRequest(0)' value='Madrid'>Madrid</p>
<p onmouseover='MakeRequest(1)' value='Brussels'>Brussels</p>
<p onmouseover='MakeRequest(2)' value='London'>London</p>
<div id='responseDiv'>
This is a div to hold the response. I've not used any elements so this text will disappear.
</div>
</body>
</html>AJAX FILE:
// JavaScript Document
function getXMLHttp()
{
var xmlHttp
try
{
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
//Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!")
return false;
}
}
}
return xmlHttp;
}
function MakeRequest(cityIndex)
{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "weather.php", true);
xmlHttp.send(null);
}
function HandleResponse(response)
{
document.getElementById('responseDiv').innerHTML = response;
}PHP FILE:
<!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=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
function getWeather($cityIndex) {
$capitals=array("London","Madrid","Brussels","Paris","Rome");
//Defines the Cities
echo '<div class="cityTitle">';
echo '<p>' . $capitals[$cityIndex] . '</p>';
echo '</div>';
//Capital City Title
$requestAddress = "http://www.google.com/ig/api?weather=" . $capitals[$cityIndex];
// Downloads weather data based on location (e.g. hull).
$xml_str = file_get_contents($requestAddress,0);
// Parses XML
$xml = new SimplexmlElement($xml_str);
// Loops XML
$count = 0;
echo '<div id="weather">';
foreach($xml->weather as $item) {
foreach($item->forecast_conditions as $new) {
echo '<div class="weatherIcon">';
echo '<img src="http://www.google.com/' .$new->icon['data'] . '"/><br/>';
echo $new->day_of_week['data'];
echo '</div>';
}
foreach($item->current_conditions as $new) {
echo '<div class="temperature">';
echo '<p>Current Temperature</p>';
echo '<p>' .$new->temp_c['data'] . '°C<br/></p>';
echo '</div>';
}
}
echo '</div>';
/*
echo '<p onmouseover="getWeather(1)" onmouseout="getWeather(0)">Madrid</p>'
echo '<p onmouseover="getWeather(2)" onmouseout="getWeather(0)">Brussels</p>'
*/
}
getWeather(0);
getWeather(1);
getWeather(2);
getWeather(3);
getWeather(4);
?>
</body>
</html>Hope that kinda makes sense, I would really appreciate any help.
Mike
