include PHP in Jquery and get php array result in info box

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
paddi_1
Forum Newbie
Posts: 1
Joined: Wed Nov 23, 2011 11:19 pm

include PHP in Jquery and get php array result in info box

Post by paddi_1 »

Dear all,
I am new for the php and scripting i have jquery code for google map where in infobox i have to load the php result which will be populated in drop down box dynamically. I have this php file separately but i dont know how to get this integrated in Jquey code and add this php result to dropdown box of info window this info window will open on map click event...i am posting html file with Jquery and php file separtley please help.

index.php:

Code: Select all

<?php
$serverName = "BSD-GESERVER01\SQLEXPRESS";
$connectionInfo = array( "Database"=>"master", "UID"=>"sa", "PWD"=>"sa");
$conn = sqlsrv_connect( $serverName, $connectionInfo );
if( $conn === false ) {
    die( print_r( sqlsrv_errors(), true));
}

$sql = "SELECT Group_ID FROM Test";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
    die( print_r( sqlsrv_errors(), true) );
}

while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
      echo $row['Group_ID']."<br />";
}

sqlsrv_free_stmt( $stmt);
?> 
GIS.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head profile="http://dublincore.org/documents/dcq-html/">
        
        <title>Simulator GIS</title>
        <meta name="keywords" content="Google maps, jQuery, plugin, geo search" />
		<meta name="description" content="GIS for simulator energy parmameters" />
		<meta http-equiv="content-language" content="en"/>
		
		<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
		<meta name="DC.title" content="Simulator Geographical Information System " />
		<meta name="DC.subject" content="Google maps;jQuery;plugin;geo search" />
		<meta name="DC.description" content="Geographical Information System For Simulator v3" />
		<meta name="DC.creator" content="Pradeep" />
        <meta name="DC.language" content="en"/>
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />	 
        <link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shCore.css" />
		<link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shThemeDefault.css" />		
		<link rel="stylesheet" type="text/css" href="css/main.css" />
        
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        <script type="text/javascript" src="../web/jquery.fn.gmap.js"></script>
		<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
      	<script type="text/javascript" src="../thirdparty/SyntaxHighlighter/shCore.js"></script>
      	<script type="text/javascript" src="../thirdparty/SyntaxHighlighter/shAutoloader.js"></script>
		<script type="text/javascript" src="../thirdparty/SyntaxHighlighter/shBrushJScript.js"></script>
		<script type="text/javascript" src="../thirdparty/SyntaxHighlighter/shBrushXml.js"></script>

        <script type="text/javascript">
			//<![CDATA[
            
			$(function() {
				
				// Only for code formatting
				SyntaxHighlighter.all();
				
				$('#map_canvas').gmap().bind('init', function(event, map) { 
					$(map).click( function(event) {
						$('#map_canvas').gmap('addMarker', {'position': event.latLng, 'draggable': true, 'bounds': false}, function(map, marker) {
							$('#dialog').append('<form id="dialog'+marker.__gm_id+'" method="get" action="/" style="display:none;"><p><label for="country">Country</label><input id="country'+marker.__gm_id+'" class="txt" name="country" value=""/></p><p><label for="state">State</label><input id="state'+marker.__gm_id+'" class="txt" name="state" value=""/></p><p><label for="address">Address</label><input id="address'+marker.__gm_id+'" class="txt" name="address" value=""/></p><p><label for="Group">Group</label><select><option value="G4">Group4</option><option value="G1">Group1</option><option value="G2">Group2</option><option value="G3">Group3</option></select></p><p><label for="comment">Comment</label><textarea id="comment" class="txt" name="comment" cols="40" rows="5"></textarea></p></form>');
							
		findLocation(marker.getPosition(), marker);
						}).dragend( function(event) {
							var self = this;
							findLocation(event.latLng, this);
						}).click( function() {
							openDialog(this);
						})
					});
				});
				
				function findLocation(location, marker) {
					$('#map_canvas').gmap('search', {'location': location}, function(results, status) {
						if ( status === 'OK' ) {
							$.each(results[0].address_components, function(i,v) {
								if ( v.types[0] == "administrative_area_level_1" || v.types[0] == "administrative_area_level_2" ) {
									$('#state'+marker.__gm_id).val(v.long_name);
								} else if ( v.types[0] == "country") {
									$('#country'+marker.__gm_id).val(v.long_name);
								}
							});
							marker.setTitle(results[0].formatted_address);
							$('#address'+marker.__gm_id).val(results[0].formatted_address);
							openDialog(marker);
						}
					});
				}
				
				function openDialog(el) {
					$('#dialog'+el.__gm_id).dialog({'modal':true, 'title': 'Edit and save Group', 'buttons': { 
						
						"Save": function() {
							$(this).dialog( "close" );
							return false;
						},
						"Remove": function() {
							$(this).dialog( "close" );
							el.setMap(null);
							return false;
						}
					}});
				}
				
            });
			//]]>
$('#Loadgroups').click(function() {
			$dialog.dialog('open');
			// prevent the default action, e.g., following a link
			return false;
		});


        </script>
        <style type="text/css">
			label { display:block; font-weight:bold; margin: 0 0 0.25em; }
			.txt { width: 99%; }
		</style>
    </head>
    <body>
    	
		<div id="doc">
			
			<div id="hd">
                <h1><a href="/">Geographical Information System For Simulator</a></h1>
            </div>
		
		<div id="dialog"></div>
			
			<div class="item gradient ui-corner-all shadow-all">
				<div id="map_canvas"></div>
			</div>
				
	<script type="text/javascript">
			try {
				var pageTracker = _gat._getTracker("UA-17614686-3");
				pageTracker._trackPageview();
			} catch(err) {}
		</script>
    <button id="Loadgroups">Load the GIS Groups</button>

	</body>
</html>
Post Reply