xmlhttprequest

**cooper30115** · 08-01-2010, 02:38 AM

Hello. I am trying to use a form to submit values to MySQL and then
have a Google map returned that has certain parameters. I have modeled this code after an example I found on w3schools. I believe that this is strictly a javascript coding problem. This is the code
that I am using:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
#filter {
       height: 5%;
       width: 73%;
       margin-top: 5px;
       margin-left: 2%;
       border: 3px solid black;
       padding: 1%;
       overflow: auto }
#txtHint {
       height: 20%;
       width: 73%;
       margin-top: 5px;
       margin-left: 2%;
       border: 3px solid black;
       padding: 1%;
       overflow: auto
       }
#maplist {
   height: 60%;
   width: 75%;
   margin-top: 5px;
   margin-left: 2%;
   border: 3px solid black }

</style>

<script type="text/javascript">

function showTrail(str)
{
if (str=="")
{
document.getElementById("maplist").innerHTML="";
return;
}
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)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","traillist2.php?q="+str,true);
xmlhttp.send();
}

</script>

</head>
<body>
<div id="filter">
<form name="filterform">
<select id="scenery" onchange="">
<option value="">Select Scenery Rating:</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="f">F</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="length" onchange="">
<option value="">Select Trail Length</option>
<option value="g">Less than 1</option>
<option value="h">1-2.9</option>
<option value="i">3-4.9</option>
<option value="j">5-6.9</option>
<option value="k">7-8.9</option>
<option value="l">More than 9</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="difficulty" onchange="">
<option value="">Select Trail Difficulty</option>
<option value="m">Easy</option>
<option value="n">Moderate</option>
<option value="o">Strenuous</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="combined" type="button" value="      Find Trail!
"onclick="showTrail(this.form['scenery'].value +
this.form['length'].value + this.form['difficulty'].value)"/>
</form>
</div>
<div id="maplist"></div>
</body>
</html>

The code is designed to drop the map into the "maplist" div. In the
code above, you see that I have the line



"alert(xmlhttp.responseText);"

which was originally:



document.getElementById("txtHint").innerHTML=xmlhttp.responseText;"

I wrote the php page so it would return code as shown below. This is the actual responseText received from the alert.

Code:

script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(34.65, -83.9);
var options = {
   zoom: 9,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.TERRAIN
   };
var infoWindow = new google.maps.InfoWindow;
var html;
var map = new google.maps.Map(document.getElementById('map_canvas'),
options);
var point = new google.maps.LatLng(
parseFloat(34.558350),
parseFloat(-84.250122));
var marker = new google.maps.Marker({
  position : point,
  map : map,
  icon : 'http://labs.google.com/ridefinder/images/mm_20_red.png'
});
var html = '<div><br><b>Amicalola Falls State Park - Creek Trail</
b><br><br><b>Trail Length:&nbsp;&nbsp;</b>0.5 miles<br><b>Scenery
Rating:&nbsp;&nbsp;</b>C<br><b>Difficulty Rating:&nbsp;&nbsp;</
b>Easy<br><b>Trail Features:&nbsp;&nbsp;</b>Stream<br><br><font
size:large><font face="Tahoma, Geneva, sans-serif" size="1"
color="#000071"><strong><a href="http://www.digitaltrailguide.com/
amicalolafallsstateparkcreekmountainlaurelspringtrails.aspx">View This
Trail</a></strong></font></div>';
bindInfoWindow(marker, map, infoWindow, html);
function bindInfoWindow(marker, map, infoWindow, html) {
     google.maps.event.addListener(marker, 'click', function() {
       infoWindow.setContent(html);
       infoWindow.open(map, marker);
     });
   }
}
function loadScript() {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "http://maps.google.com/maps/api/js?
sensor=false&callback=initialize";
   document.body.appendChild(script);
 }
 window.onload = loadScript;
</script>I thought that this code would be dropped into the div and

**mburt** · 08-01-2010, 02:52 AM

If the state of the request is LOADING or DONE the return for the "responseText" attribute is empty.

When it does "work", it returns the entity body of what you're asking for... For example, if the content-type is "text/css", you'll just get CSS attributes. Either way, it's kind of like a source code.

All you're seeing in that return is the code of some file. I'm not entirely sure what you want to return with that function.

Are you trying to display a Google map, which is supposedly the "responseText"?

I think you need to look at the Google Maps API:

http://code.google.com/apis/maps/doc...on/javascript/

**cooper30115** · 08-01-2010, 11:49 AM

Hello and thanks for replying. Yes, I am wanting to diplay Google Maps as the responseText. The code that is returned is exactly what I would like to be executed. When I manually copy and paste the responseText into the maplist div and then reload the page, the map is displayed just as I want it. Of course, the page isn't dynamic then because it doesn't involve the form anymore. I'm really stumped.

Thread: xmlhttprequest

Thread Tools

Search Thread

xmlhttprequest

xmlhttprequest

Bookmarks

Bookmarks

Posting Permissions