What is wrong with my code (using dojo xhrGet Ajax) - php

Question

I'm attemping to use this code to call a php file, access the database, retrieve values, and return them using a JSON object, then edit them into a text box.
Code for Javascript end:
As the user changes the option in the dropdown list, the app should call a PHP script to fetch the new values from the database, retrieve them from a JSON object, and modify a text area to show the new values.
<select id="busSelect" name="busSelect">
<option>S053-HS - P</option>
<option>S059-HS - P</option>
<option>S064-HS - P</option>
<option>S069-HS - P</option>
<option>S070-HS - P</option>
</select>
<textarea id="memo"></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
<script type ="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type ="text/javascript">
<?php
?>
dojo.ready(function(){
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(26.4615832697227,-80.07325172424316),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(dojo.byId("map_canvas"),
myOptions);
dojo.connect(busSelect,"onchange",function(){
dojo.xhrGet({
url: "getRoute.php",
handleAs: "json",
timeout: 1000,
content: {
route: dojo.byId("busSelect").value
},
load: function(result) {
var formResult = result.lat_json + " " + result.long_json + " " + result.name_json;
dojo.byId(memo).value = formResult;
}
});
});
PHP Script:
Should take the name it receives from the JS app, which is the "bus name" and find the bus id using that name. Then it should access bus stops using that ID (this all works, I'm just getting the JSON/AJAX bit wrong)
<?php
header('Content-type: application/json');
require_once 'database.php';
mysql_connect($server, $user, $pw);
mysql_select_db("busapp") or die(mysql_error());
$route = $_GET["route"];
$result_id = mysql_query("SELECT * FROM routes WHERE name = $route");
$result_row = mysql_fetch_array($result_id);
$route_id = $row['id'];
$result = mysql_query("SELECT * FROM stops_routes WHERE route_id = $route_id")
or die(mysql_error());
$markers;
$stopid = array();
$time = array();
$lat;
$long;
$name;
$waypts = array();
for ($x = 0; $row = mysql_fetch_array($result); $x++) {
$stopid[$x] = $row['stop_id'];
$time[$x] = $row['time'];
}
for ($x = 0; $x < sizeof($stopid); $x++) {
$result = mysql_query("SELECT * FROM stops WHERE id = $stopid[$x]")
or die(mysql_error());
$row = mysql_fetch_array($result)
or die(mysql_error());
$lat[$x] = $row['lat'];
$long[$x] = $row['long'];
$name[$x] = $row['name'];
}
$size = count($stopid);
$lat_json = json_encode($lat);
$long_json = json_encode($long);
$name_json = json_encode($name);
?>
I'm also getting an error on dojo.xd.js:14 when running.

Answer 1

Instead of individual variables passed to json_encode(), you should be creating an object and then encoding it as JSON, then simply echoing out the JSON with the correct Content-type header.
// Start with an associative array
$arr = array("lat_json" => $lat, "long_json" => $long, "name_json" => $name);
// Cast it to an Object of stdClass
$obj = (object)$arr;
// Encode it
$json = json_encode($obj);
// And return it to the calling AJAX by just echoing out the JSON
header("Content-type: application/json");
echo $json;
exit();
Before encoding JSON, your object now looks like (with my example data):
stdClass Object
(
[lat_json] => 12345
[long_json] => 45678
[name_json] => the name
)
// After json_encode()
{"lat":12345,"long":45678,"name":"the name"}
As you've setup your javascript on the receiving end, I believe it should work without modification. To be certain of the JSON structure from the javascript end, be sure to check console.dir(result) inside your load() function.