Array is empty after ajax success function

Question

I'm a novice programmer so do pardon be for my shallow knowledge.

I'm trying send an ajax request to the server and displaying it using an array. However, when i use my array outside it's showing the data is undefined. I would like to know what are the causes and how can I rectify my code. Thanks in advance.

Below is my JavaScript, PHP and HTML code.

JavaScript

var name = [];
$(window).load(function(){
     $.ajax({
         url: '../../PHP/admin/retrieve_elderly.php',
         data: 'area_name=' + area_name,
         type: 'POST',
         dataType: 'json',
         success: function(data){
              for(var i = 0; i < data.length; i++){
                  name.push(data[i]);
             }
         }
     });    
     $('#feedback').text('Hello ' + name[0]);
}

PHP

$area_name = $_POST['area_name'];

$name = array();

$sql_elderly = "SELECT * FROM elderly ORDER by name";
$query_elderly = mysql_query($sql_elderly);
while($rows = mysql_fetch_array($query_elderly)){
    $name[] = $rows['name'];
}

echo json_encode($name);

HTML

<?php 
include "../../PHP/connection.php";

if(isset($_GET['area_name'])){
    $area_name = $_GET['area_name'];

    $sql = "SELECT * FROM floorplan WHERE zone_name = '$area_name'";
    $query = mysql_query($sql);
?>
<!DOCTYPE HTML>
<html>
<head></head>
<body>
    <div id = "feedback"></div>
    <script type = "text/javascript" src = "../../JavaScript/jquery.js"></script>
    <script type = "text/javascript" src = "../../JavaScript/setwifi.js"></script>
</body>
</html>

Output:

Hello undefined

score 1 · Answer 1 · answered Sep 25 '14 at 07:20

Use as

var name = [];
$(window).load(function(){
     $.ajax({
         url: '../../PHP/admin/retrieve_elderly.php',
         data: 'area_name=' + area_name,
         type: 'POST',
         dataType: 'json',
         success: function(data){
              for(var i = 0; i < data.length; i++){
                  name.push(data[i]);
             }
             $('#feedback').text('Hello ' + name[0]);
         }
     });    

}

score 1 · Accepted Answer · answered Sep 25 '14 at 07:21

1

Thats because ajax requests run async.

Your $('#feedback').text('Hello ' + name[0]); Is executed before the ajax call finishes you should use jquerys .promise().done(function(){ Promise

answered Sep 25 '14 at 07:21

Stijn Bernards

1,091
11
29

Array is empty after ajax success function

2 Answers2