www.webdeveloper.com
Results 1 to 2 of 2

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

  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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.08847 seconds
  • Memory Usage 2,881KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (5)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates