View Full Version : Empty Div

07-31-2010, 05:00 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<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 }


<script type="text/javascript">

function showTrail(str)
if (str=="")
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp.readyState==4 && xmlhttp.status==200)


<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 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 id="difficulty" onchange="">
<option value="">Select Trail Difficulty</option>
<option value="m">Easy</option>
<option value="n">Moderate</option>
<option value="o">Strenuous</option>
<input id="combined" type="button" value=" Find Trail!
"onclick="showTrail(this.form['scenery'].value +
this.form['length'].value + this.form['difficulty'].value)"/>
<div id="maplist"></div>

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


which was originally


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

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'),
var point = new google.maps.LatLng(
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
bindInfoWindow(marker, map, infoWindow, html);
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?
window.onload = loadScript;

I thought that this code would be dropped into the div and the map
would populate. The main reason that I believed that is because if I
manually copy and paste the responseText listed above into the div
then the map loads perfectly. Of course, the page isn't dynamic
then. Maybe I just don't understand what is going on here. I also
thought that the responseText is a string instead of what is shown in
the alert box and maybe I should parse it somehow. If this is the
case, I have no idea how to even get started. I have used this same
method successfully to create a table with values generated from
MySQL. Please help. I have been stumped with this issue for some
time now and I am no closer to a solution. I am also fairly new to
web design (javascript, php, MySQL) so sometimes the terminology is a
major barrier for me.