i have a webpage on which there is a openlayer map with marker. Once the user clicks on marker, then through ajax a form appears and user can query using that form. Till here everything works fine. Now on the form i have a dropdown and when user selects a particular item from the first dropdown then the second dropdown must get updated using ajax.
I dont know what the problem is.
here is my code:
-------------------mappage.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#container {
margin: 1%;
padding: 0;
width: 97%;
background-color: #fc9;
}
#left, #right {
float: left;
width: 45%;
margin: 1% 0 1% 1%;
padding: 0.5%;
background-color: #9cf;
color: #000;
}
#right {
float: right;
margin: 1% 1% 1% 0;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
</style>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA8KGkjlgKAI0TtaruyqhE3xSV5V3d_hHcun51aTaQTYJeDgLrvhTmfiVUIdglsCGFtVm8nBIUv8pVyQ'></script>
<script type="text/javascript">
var map;
// avoid pink tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function init(){
var options = {
projection: "EPSG:900913", // the "community" epsg code for spherical mercator
units: "m", // map horizontal units are meters
maxResolution: 156543.0339, // this resolution displays the globe in one 256x256 pixel tile
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, // these are the bounds of the globe in sperical mercator
20037508, 20037508)
};
map = new OpenLayers.Map('map', options); // construct a map with the above options
var gsat = new OpenLayers.Layer.Google( // create Google layer
"Google Sattelite",
{type: G_SATELLITE_MAP, 'sphericalMercator': true}
);
var usBounds = new OpenLayers.Bounds(
-8888870.22604, 3918667.83045, -8877385.56254, 3917100.87137
);
map.addLayers([gsat]); // add the created layers to the map i.e base map and marker
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.zoomToExtent(usBounds);
var markers = new OpenLayers.Layer.Markers( "Station 1" ); //variable and set of functions for the marker
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-8886147.15691,3918514.95639),icon));
//----------------------------------First Station-------------------------
markers.events.register("click",markers,function(evt){
var xmlhttp;
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=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.php",true);
xmlhttp.send();
OpenLayers.Event.stop(evt);
});
//----------
var marker_layer = new OpenLayers.Layer.Markers( "HQ Station" ); //variable and set of functions for the marker
map.addLayer(marker_layer);
var siz = new OpenLayers.Size(21,25);
var offse = new OpenLayers.Pixel(-(siz.w/2), -siz.h);
var ico = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', siz, offse);
marker_layer.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-8881236.07784,3920540.53764),ico));
//----------------------------------HQ Station-------------------------
marker_layer.events.register("click",marker_layer,function(evt){
var xmlhttp;
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=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","station2.php",true);
xmlhttp.send();
OpenLayers.Event.stop(evt);
});
}
</script>
</head>
<body onload="init()">
<h1><a href="#">Santee Forest Research Project</a></h1>
<div id="container">
<div id="left">
<div id="map" style="width:400px; height:400px"></div>
</div><!-- left -->
<div id="right">
<div id="myDiv"></div>
</div><!-- right -->
<div class="clear"></div>
</div>
</body>
</html>
----------------------------station1.php-----------
<html>
<head>
<title>Roshan's Triple Ajax dropdown code</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getState(countryId) {
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Country</td>
<td width="150"><select name="country" onChange="getState(this.value)">
<option value="">Select Country</option>
<option>2003-05-06</option>
<option>2002-05-06</option>
</select></td>
</tr>
<tr style="">
<td>State</td>
<td ><div id="statediv"><select name="state" >
<option>Select Country First</option>
</select></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
----------------------getoptn.php-------------
<?php
//$country=$GET['country'];
$country= $GET["country"];
echo $country;
$con = mysql_connect("localhost", "root", "");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("shreyas", $con);
$query = "select * from $country";
$result= mysql_query($query);
$i = 0;
echo "<select name=\"state\" > <option>Select State</option>";
while($i < mysql_num_fields($result)) {
$meta = mysql_fetch_field($result, $i);
echo "<option>" . $meta->name. "</option>";
$i++;
}
echo "</select>";
?>
can somebody explain me how can we use two ajax objects on same page.
