Question

After a long research here, I tried to handle some AJAX data via callback. I’m an italian user, so I apologize if I’ll not be clear with my explanation (actually, it’s pretty difficult for me to explain my problem in english).

I’m trying to pass some data via callback. My jQuery.ajax.async is not set on false, because I need to work in asynchronous mode. So I’m trying to pass a callback to my function, according to some posts I found here. But if I try to show this data via alert function, I can see it’s undefined. Here’s the code:

function loadentities(id, username, password, system, host)
{
    var postData = "username=" + encodeURI(username) +
        "&password=" + encodeURI(password) +
        "&system=" + encodeURI(system) +
        "&host=" + encodeURI(host);

    jQuery.ajax({

        type: "POST",
        dataType: "json",
        data: postData,
        beforeSend: function(x) 
        {       
            if(x && x.overrideMimeType) 
            {   
                x.overrideMimeType("application/json;charset=UTF-8");
            }
        },
        url: 'operations.php?op=loadentities',
        error: function(x, textStatus, errorThrown)
        {
            alert("Request failed: " + textStatus + " " + errorThrown);
        },
        success: function(data) 
        {
            var html = "";
            for(var i=0; i < data.length; i++)
            {
                html += "<li><a onclick=\"showhide('" + data[i].entity + "');\">" + data[i].entity + "</a><ul id=\"" + data[i].entity + "\" class=\"list\"></ul></li>"; 
                loadlastfiveevents(username, password, system, host, data[i].entity, function(data)
                            {
                                 alert(data);
                                 entityData = new Array(); 
                                 for(var i = 0; i < data.length; i++)
                                 {
                                     var entityDataEntry = new Object();
                                     entityDataEntry.key = data[i].key;
                                     entityDataEntry.event = data[i].event;
                                     entityDataEntry.timestamp = data[i].timestamp;
                                     entityData.push(entityDataEntry);
                                 }
                                 alert(data[0].key);                                                      
                             });
                entitiesValues[entitiesIndex++] = data[i].entity;
            }

            jQuery(html).appendTo('#hlentity' + id);
        }
    }); //end jQuery.ajax
}

function loadlastfiveevents(username, password, system, host, entity, buildlastfiveevents)
{
    var postData = "username=" + encodeURI(username) +
        "&password=" + encodeURI(password) +
        "&system=" + encodeURI(system) +
        "&host=" + encodeURI(host) +
        "&entity=" + encodeURI(entity);

    jQuery.ajax({

        type: "POST",
        dataType: "json",
        data: postData,
        beforeSend: function(x) 
        {       
            if(x && x.overrideMimeType) 
            {   
                x.overrideMimeType("application/json;charset=UTF-8");
            }
        },
        url: 'operations.php?op=getlatestevents',
        error: function(x, textStatus, errorThrown)
        {
            alert("Request failed: " + textStatus + " " + errorThrown);
        },
        success: function(data) 
        {
            var color = "green";
            var html = "";
            for(var i = 0; i < data.length; i++)
            {
                if(data[i].event == "SUP") color = "green";
                else if(data[i].event == "IER") color = "yellow";
                else if(data[i].event == "SDW") color = "black";
                else color = "red";
                html += "<li><img src=\"images/" + color + ".jpg\" />" + data[i].key + " " + data[i].event + " " + data[i].timestamp + "</li>"; 
            }
            jQuery(html).appendTo('#' + entity);
            propagate(entity, data[0].event);
            buildlastfiveelements(data);
        }
    }); //end jQuery
}

I hope this post is clear enough, thank you for your patience and time.

EDIT: here’s a sample of the JSON code returned by getlatestevents (within loadlastfiveevents).

[
    {
        "key": "error",
        "event": "SUP",
        "timestamp": "2012-11-16 11:13:36"
    },
    {
        "key": "error",
        "event": "SDW",
        "timestamp": "2012-11-16 11:12:57"
    },
    {
        "key": "error",
        "event": "SUP",
        "timestamp": "2012-11-16 11:11:32"
    },
    {
        "key": "error",
        "event": "SDW",
        "timestamp": "2012-11-15 19:40:31"
    },
    {
        "key": "timeout",
        "event": "SER",
        "timestamp": "2012-11-15 19:30:54"
    }
]

Answer 1

This won’t work.

You’re setting the datatype to json, meaning you expect a JSON result to be returned, anything else will fail.

Then you use a for loop iterating based on the returned JSON objects length, and since objects don’t have a length the for loop never runs.

You’re either expecting arrays, which have a length property, but they are not coming thru since the datatype is set to JSON, or you’re expecting objects, which are coming thru as JSON objects, which don’t have a length property and must be looped with for(key in object) or $.each(object, function(key, value) {...}) etc..