Bizarre JavaScript bug, caused either by syntax, Cytoscape Web, or jQuery

I'm writing a small web app using CytoscapeWeb. It downloads an XML file containing a graph, and displays it. I've encountered an issue where it will not display the graph (showing instead a blank graph), even though the file is known to be sound. After several days of scouring my code to no avail, I began modifying the example code provided by the tutorial to reproduce the issue.

This code works:

function get_network(filename)
{

    var output = "";

    $.ajax({url: filename, type: "GET", dataType: "text", success: function(result) { output = result; } });

    alert(filename);
    alert(output);

    return output;

}

And this code does not:

function get_network(filename)
{ 

    var output = "";

    $.ajax({url: filename, type: "GET", dataType: "text", success: function(result) { output = result; } });

    //alert(filename);
    //alert(output);

    return output;

}

The only difference being that the two alert() statements are commented out. When only the first statement (alert(filename);) is removed, the alert box shows an empty string. So it would seem the blank graph is caused by an issue wherein the output variable is not properly set.

I've tested this in Firefox and Internet Explorer. It works if there is one alert statement that prints the string "ASDFSADF" rather than the output variable. Interestingly however, code that does not use the alert() statement, such as 'var junk = "ASDFSADF"', does not work.

So it seems to me that there are three possibilities:

There is some sort of syntax or logic mistake I've made, which makes the number of lines parsed significant
Cytoscape Web is causing the issue, in a manner I cannot imagine
jQuery is not calling the 'success' function

I am beginning to suspect however that this issue is beyond my expertise, and is caused by something I have not considered.

Where that syntax error could be however is beyond me. I've searched high and low. Has anyone seen something like this, or otherwise know that is happening?

Thank you very much for your assistance.

The full code: http://pastebin.com/rvcV3LFL
The XML file: http://pastebin.com/HCyuKQnx

Solution

The output variable is not set at the time of execution of the alert because the AJAX call is asynchronous (the A in AJAX is for asynchronous).

What ever you need to happen after the AJAX call completes will need to be passed as a callback.

So if your code is something like this:

var graph = get_network(filename);
draw(graph);

you would need to change the get_network to:

function get_network(filename,callback)
{ 

    var output = "";

    $.ajax({url: filename, type: "GET", dataType: "text", success: function(result) { 

    callback(result);
}

and the calling code would then be

get_network(filename,draw);

where draw is still the function from the first example