运行AJAX以检索登录用户返回undefined

Question

Hi so I am in the process of learning AJAX and have decided for a better UX on my admin system to have users online, messages, tasks updated and so on updated every 30 seconds or so depending on the load (in the code i have it set to 5 seconds for testing purposes).

The PHP file works fine and outputs the following JSON:

[{"username":"columkelly","time":"2013-12-18 14:13:55"}]

PHP

header('Content-Type: application/json');

if($_GET['function'] === "users_online"){ users_online(); }

function users_online(){
$result=mysql_query("SELECT * FROM sessions");

while($array = mysql_fetch_assoc($result)){
    $dataArray[] = $array;
}
echo json_encode($dataArray);
}

The problem comes when I try to output the users that are online... The console log shows that it has picked it up but I am unable to get it to work with the users_online function with the callback. Here is the AJAX:

AJAX

var timer, delay = 5000;        

timer = setInterval(function(){
val = $(this).serialize();
$(document).ready(function () {
$.when(
    $.ajax({
        url: "ajax.php?function=users_online",
        dataType: "json",
        type: "GET",
        data: val,
        success: function(data)
        { 
        console.log(data);
        }
    }),
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: "bird",
        tagmode: "any",
        format: "json"
    })
).then(function (users_online, images) {
    $("#users_online").html('');
    $.each(users_online, function(data){
        $('#users_online').html(data.username +':' + data.time);
    }
),
$("#dvImages").html('');
random = Math.floor((Math.random()*3)+1);
$.each(images[0].items, function (i, item) {
    var img = $("<img/>");
    img.attr('width', '200px');
    img.attr('height', '150px');
    img.attr("src", item.media.m).appendTo("#dvImages");
    if (i == random) return false;
})
});
});
}, delay);

What i end up getting is 1-4 images appearing from the flicker api (used this as a test base) and undefined:undefined. I know it has to have something to do with the success (i tried putting them into a javascript array but that did not work) and the function to grab the data:

function (users_online, images) {
    $("#users_online").html('');
    $.each(users_online, function(data){
        $('#users_online').html(data.username +':' + data.time);
    }
)

Thanks for all the help so far guys. I have searched far and wide but am unable to get anything to work with this.

Colum

EDIT:

This is the finished code that worked:

var timer, delay = 5000;        
var users_online = [];

timer = setInterval(function(){
val = $(this).serialize();
$(document).ready(function () {
$.when(
    $.ajax({
        url: "ajax.php?function=users_online",
        dataType: "json",
        type: "GET",
        data: val,
        success: function(data)
        { 
        console.log(data);
        users_online = data; // Now call and loop through users_online wherever you need
        }
    }),
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: "bird",
        tagmode: "any",
        format: "json"
    })
).then(function (users_online, images) {
    $("#users_online").html('');
    $.each(users_online[0], function (i, item) {
        $('#users_online').html(item.username +':' + item.time);
    }
),
$("#dvImages").html('');
random = Math.floor((Math.random()*3)+1);
$.each(images[0].items, function (i, item) {
    var img = $("<img/>");
    img.attr('width', '200px');
    img.attr('height', '150px');
    img.attr("src", item.media.m).appendTo("#dvImages");
    if (i == random) return false;
})
});
});
}, delay);

Answer 1

Although people would argue how optimal this solution is, it will fix the issue granted you don't overwrite it:

var timer, delay = 5000;        

var global_users_online = []; // create a global array

timer = setInterval(function(){
val = $(this).serialize();
$(document).ready(function () {
$.when(
    $.ajax({
        url: "ajax.php?function=users_online",
        dataType: "json",
        type: "GET",
        data: val,
        success: function(data)
        { 
            console.log(data);
            global_users_online = data; // Now call and loop through global_users_online wherever you need
        }
    }),
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: "bird",
        tagmode: "any",
        format: "json"
    })
)