In the code below there is a XMLHTTPRequest with the target url test_location_jquery.php, and this file is never accessed despite the success function being triggered. When run alone for testing test_location_jquery.php has worked successfully returning the JSON object as expected. Any idea as to how the success function could be triggered while the file is not accessed would be appreciated.
<?php
require_once '../meta/php/dbConn.php';
$charlie_query = "";
$charlie_result = "";
$charlie_query = "
SELECT ud.user_id as 'id',
concat(ud.last_name,', ',ud.first_name) as 'name'
FROM `user_detail` AS ud,
`user_type` AS UT
WHERE ud.user_type = ut.id
AND ut.class IN ('charlie')
AND ut.level IN (4)
ORDER BY ut.class;
";
$charlie_result = mysql_query($charlie_query);
if(!(bool)$charlie_result){
throw new Exception();
}
?>
<html>
<head>
<script src="../meta/js/jquery-1.7.2.js"></script>
<!-- <script src="../meta/js/getXML_sir.js"></script> -->
<script>
$(document).ready(function(){
$('#charlie').change(function(){
var charlie_id = $('#charlie option:selected').val();
var DT = "json";
$.post(
'test_location_jquery.php',
{'id':charlie_id,'datatype':DT},
function(data){
alert('Success');
var obj = $.parseJSON(data);
}
);
if(obj != 'undefined'){
var locations = obj.find('location');
console.log(locations);
}else{
alert("failure");
}
})
})
</script>
</head>
<body>
<form>
<label>Charlie: </label><select id="charlie" name="charlie">
<option> </option>
<?php
while($row = mysql_fetch_assoc($charlie_result)){
print("<option value='".$row['id']."'>".$row['name']."</option>");
}
?>
</select>
<label>Location: </label><select id="location" name="location"></select>
</form>
<div></div>
</body>
</html>
<?php
require_once("../meta/php/dbConn.php");
if(!isset($_POST)){
throw new Exception();
}else{
$id = $_POST['id'];
$datatype = $_POST['datatype'];
}
$query = "
SELECT l.id as 'id',
ld.attribute_string as 'name'
FROM `location` AS l,
`location_details` AS ld
WHERE l.id = ld.location_id
AND ld.attribute_label = 'name'
AND l.id = ".$id.";
";
$result = mysql_query($query);
if(!(bool)$result){
throw new Exception();
}else{
switch($datatype){
case 'xml':
break;
case 'json':
$rows = array();
while($r = mysql_fetch_assoc($result)) {
$rows[] = $r;
}
return json_encode($rows);
break;
}
?>
Your .post() function is asynchronous. That means that calling .post() just STARTs the post. The lines following it execute immediately before the post() has completed and before the success handler is called.
Then, some time later the success handler is called.
All code that uses the response from the post MUST be in the success handler or called from the success handler.
So, your problem is that you cannot refer to data set in the success handler where this code is located (right after the .post() call). You have to put this code inside the success handler itself.
if(obj != 'undefined'){
var locations = obj.find('location');
console.log(locations);
}else{
alert("failure");
}
So, after doing that, your code would look like this:
<script>
$(document).ready(function(){
$('#charlie').change(function(){
var charlie_id = $('#charlie option:selected').val();
var DT = "json";
$.post(
'test_location_jquery.php',
{'id':charlie_id,'datatype':DT},
function(data){
alert('Success');
var obj = $.parseJSON(data);
if(obj != 'undefined'){
var locations = obj.find('location');
console.log(locations);
}else{
alert("failure");
}
}
);
})
})
</script>
This should work.
$.post(
'test_location_jquery.php',
{'id':charlie_id,'datatype':DT},
function(data){
alert('Success');
var obj = $.parseJSON(data);
if(obj != 'undefined'){
var locations = obj.find('location');
console.log(locations);
}else{
alert("failure");
}
}
);
As Ajax is asynchronous, the obj variable didn't exist until the page was totally called. so if you put inside the function(data) it will only proceed after the call is completely made, and the variable will now exist.