Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    xmlhttprequest help

    I tried posting this same thread under AJAX and I didn't get a single response. I am wondering if it may be in the wrong section so I decided to try here. If this is bad posting etiquette, I apologize.

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    You can't use window.onload to invoke that code!

    window.onload means just what it says "when the window (page of html) is finished loading, invoke the code specified."

    The window was long long ago finished loading by the time you dump all that into the innerHTML of that div.

    You need to, instead, simply invoke the code directly once it is in place. Presumably, you could do that by calling loadScript() just after doin the innerHTML assignment.

    Personally, I wouldn't have done all this as you have. I would put the Google .js file in place as part of the natural page load. I would have put all your JS code you show there in place, too.

    And then I would have only loaded *DATA* via the AJAX call.

    But I can't see any reason your concept won't work if you invoke it correctly.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •