www.webdeveloper.com
Results 1 to 2 of 2

Thread: JavaScript wont use the new XML code generated by PHP

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    6

    JavaScript wont use the new XML code generated by PHP

    Good day,

    I am trying to build a simple web 'app' where I will have a map (using the google maps api) and a few links below it as a 'filter'. I want to be filtering the data by type (ie: bar or restaurant).

    Basically the map.html page uses javascript that picks up the XML which is generated by a PHP script.

    here is the following code:

    map.hmtl:

    Code:
    <!doctype html>
        <html>
    	<head>
    		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyASO80RjNn2d_Jjy9vdNHA5E3tfmALkWXw&sensor=false"></script>
    		<script type="text/javascript">
    			
    			//<![CDATA[
    			
    			var customIcons = {
    				restaurant: {
    					icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    					shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    				},
    				bar: {
    					icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    					shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    				}
    			};
    			
    			function load() {
    				var map = new google.maps.Map(document.getElementById("map"), {
    					center: new google.maps.LatLng(47.6145, -122.3418),
    					zoom: 13,
    					mapTypeId: 'roadmap',
    					disableDefaultUI: true
    				});
    				var infoWindow = new google.maps.InfoWindow;
    				
    				// Change this depending on the name of your PHP file
    				downloadUrl("genxml3.php", function(data) {
    					var xml = data.responseXML;
    					var markers = xml.documentElement.getElementsByTagName("marker");
    					for (var i = 0; i < markers.length; i++) {
    						var name = markers[i].getAttribute("name");
    						var address = markers[i].getAttribute("address");
    						var type = markers[i].getAttribute("type");
    						var point = new google.maps.LatLng(
    							parseFloat(markers[i].getAttribute("lat")),
    							parseFloat(markers[i].getAttribute("lng"))
    						);
    						var html = "<b>" + name + "</b> <br />" + address + "<br />" + type;
    						var icon = customIcons[type] || {};
    						var marker = new google.maps.Marker({
    							map: map,
    							position: point,
    							icon: icon.icon,
    							shadow: icon.shadow
    						});
    						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 downloadUrl(url, callback) {
    				var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    				
    				request.onreadystatechange = function() {
    					if (request.readyState == 4) {
    						request.onreadystatechange = doNothing;
    						callback(request, request.status);
    					}
    				};
    				
    				request.open('GET', url, true);
    				request.send(null);
    			}
    			
    			function doNothing() {}
    		
    			//]]>
    			
    			
    		</script>
    	</head>
    	<body onload="load()">
    		<div id="map" style="width: 900px; height: 750px;"></div>
    		<ul>
    			<a href="#">Restaurant</a>
    		</ul>
    	</body>
        </html>
    genxml3.php:

    Code:
    <?php  
    
        require("dbinfo.php"); 
     
        // Start XML file, create parent node
    
        $dom = new DOMDocument("1.0");
        $node = $dom->createElement("map");
        $parnode = $dom->appendChild($node); 
    
        // Opens a connection to a MySQL server
    
        $connection=mysql_connect('localhost', $username, $password);
        if (!$connection) {  die('Not connected : ' . mysql_error());} 
    
        // Set the active MySQL database
    
        $db_selected = mysql_select_db($database, $connection);
        if (!$db_selected) {
          die ('Can\'t use db : ' . mysql_error());
        } 
    
        // filtering
        //$filter = $_GET['f'];
    
        // Select all the rows in the markers table
    
    
        // Checks for the 'GET' variable, if there isn't, run normal XML script, if there is,     get the restriction/filter and query from the database with the filter
    
        if(!empty($_GET)){
    	
    	$filter = $_GET['f'];
    	$query = "SELECT * FROM markers WHERE type = '$filter'";
    	$result = mysql_query($query);
    	if (!$result) {  
    		die('Invalid query: ' . mysql_error());
    	}
        } else {
    	$query = "SELECT * FROM markers WHERE 1";
    	$result = mysql_query($query);
    	if (!$result) {  
    		die('Invalid query: ' . mysql_error());
    	}
        }
    
        header("Content-type: text/xml"); 
    
        // Iterate through the rows, adding XML nodes for each
    
        while ($row = @mysql_fetch_assoc($result)){  
          // ADD TO XML DOCUMENT NODE  
          $node = $dom->createElement("marker");  
          $newnode = $parnode->appendChild($node);   
          $newnode->setAttribute("name",$row['name']);
          $newnode->setAttribute("address", $row['address']);  
          $newnode->setAttribute("lat", $row['lat']);  
          $newnode->setAttribute("lng", $row['lng']);   
          $newnode->setAttribute("type", $row['type']);
    
        } 
    
        echo $dom->saveXML();
    
        ?>
    The PHP script generates the following XML code:

    Code:
    <map> 
        <marker name="Pan Africa Market changed" address="1521 1st Ave, Seattle, WA"     lat="47.6089" lng="-122.34" type="restaurant"/> 
        <marker name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.6136" lng="-122.344" type="bar"/> 
        <marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.6246" lng="-122.356" type="restaurant"/> 
        <marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.6064" lng="-122.338" type="restaurant"/> 
        <marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.6128" lng="-122.346" type="bar"/> 
        <marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.606" lng="-122.34" type="restaurant"/> 
        <marker name="Mama's Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.614" lng="-122.345" type="bar"/> 
        <marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.6172" lng="-122.327" type="bar"/> 
        <marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.6101" lng="-122.343" type="restaurant"/> 
    </map>
    and when I force a "get" variable in the nav bar (ie: genxml3.php?f=restaurant) the following XML code is outputed:
    Code:
    <map>
        <marker name="Pan Africa Market changed" address="1521 1st Ave, Seattle, WA" lat="47.6089" lng="-122.34" type="restaurant"/>
        <marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.6246" lng="-122.356" type="restaurant"/>
        <marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.6064" lng="-122.338" type="restaurant"/>
        <marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.606" lng="-122.34" type="restaurant"/>
        <marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.6101" lng="-122.343" type="restaurant"/>
        </map>
    So I know the logic in the PHP script works, because it filters the code needed. So if I put in "f=restaurant" only the markers with type "restaurant" show, and the same if I use "f=bar".

    But the JavaScript still only uses the first XML code. How can I get the JavaScript code to use the second XML code (the one with the filter applied).


    So what I am now looking for is a way to get the JavaScript code to run using the new XML code when a link in the map.html file is pressed?

    Thank you in advance,
    Josh

  2. #2
    Join Date
    Jun 2013
    Posts
    6

    Solution

    Hi there, I went another route.

    No array's or anything.

    Basically I put a "GET" variable in the URL and picked it up through the JavaScript, then used that login in the JavaScript to filter it.

    Only the map.html file was affected, and I changed it to map.php:

    Code:
    <!doctype html>
    <html>
    	<head>
    		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    		<title>PHP & Google Maps</title>
    		<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
    		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyASO80RjNn2d_Jjy9vdNHA5E3tfmALkWXw&sensor=false"></script>
    		<script type="text/javascript">
    			
    			//<![CDATA[
    			
    
    			
    			var customIcons = {
    				restaurant: {
    					icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    					shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    				},
    				bar: {
    					icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    					shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    				}
    			};
    			
    			function load() {
    				var map = new google.maps.Map(document.getElementById("map"), {
    					center: new google.maps.LatLng(-26.179311, 28.042399),
    					zoom: 7,
    					mapTypeId: 'roadmap',
    					disableDefaultUI: true
    				});
    				var infoWindow = new google.maps.InfoWindow;
    				
    				// Change this depending on the name of your PHP file
    				downloadUrl("genxml3.php", function(data) {
    					var xml = data.responseXML;
    					var markers = xml.documentElement.getElementsByTagName("marker");
    					for (var i = 0; i < markers.length; i++) {
    						var name = markers[i].getAttribute("name");
    						var address = markers[i].getAttribute("address");
    						var area = markers[i].getAttribute("area");
    						var type = markers[i].getAttribute("type");
    						var point = new google.maps.LatLng(
    							parseFloat(markers[i].getAttribute("lat")),
    							parseFloat(markers[i].getAttribute("lng"))
    						);
    						var html = "<b>" + name + "</b> <br />" + address + "<br />" + type;
    						var icon = customIcons[type] || {};
    						
    						var filter = getUrlVars()["f"];
    						
    						if (filter == null) {
    							var marker = new google.maps.Marker({
    								map: map,
    								position: point,
    								icon: icon.icon,
    								shadow: icon.shadow
    							});
    							
    							bindInfoWindow(marker, map, infoWindow, html);
    						} else if(area == filter) {
    							var marker = new google.maps.Marker({
    								map: map,
    								position: point,
    								icon: icon.icon,
    								shadow: icon.shadow
    							});
    							
    							bindInfoWindow(marker, map, infoWindow, html);
    						} else if(type == filter) {
    							var marker = new google.maps.Marker({
    								map: map,
    								position: point,
    								icon: icon.icon,
    								shadow: icon.shadow
    							});
    							
    							bindInfoWindow(marker, map, infoWindow, html);
    						}
    					}
    				});
    				
    			}
    			
    			
    
    			function getUrlVars() {
    				var vars = {};
    				var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    					vars[key] = value;
    				});
    				return vars;
    			}
    
    			function bindInfoWindow(marker, map, infoWindow, html){
    				google.maps.event.addListener(marker, 'click', function(){
    					infoWindow.setContent(html);
    					infoWindow.open(map, marker);
    				});
    			}
    			
    			function downloadUrl(url, callback) {
    				var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    				
    				request.onreadystatechange = function() {
    					if (request.readyState == 4) {
    						request.onreadystatechange = doNothing;
    						callback(request, request.status);
    					}
    				};
    				
    				request.open('GET', url, true);
    				request.send(null);
    			}
    			
    			function doNothing() {}
    			
    			//]]>
    			
    			
    		</script>
    	</head>
    	<body onload="load()">
    		<div id="map" style="width: 900px; height: 750px;"></div>
    		<a href="map.php">Reset</a>
    		
    		<br /><br />
    		<ul>
    			Search by Type:
    			<li><a href="map.php?f=nursery">Nursery</a></li>
    			<li><a href="map.php?f=childrens_home">Childrens Home</a></li>
    		</ul>
    		<ul>
    			Search by Area:
    			<li><a href="map.php?f=sandton">Sandton</a></li>
    			<li><a href="map.php?f=randburg">Randburg</a></li>
    			<li><a href="map.php?f=johannesburg">Johannesburg</a></li>
    		</ul>
    		
    		
    	</body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles