CODEWITHSUNDEEP
javascriptjquerycytoscape-web
Max Bond
Max Bond

Reputation: 133

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:

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

Upvotes: 3

Views: 227

Answers (2)

Rune FS
Rune FS

Reputation: 21742

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

Upvotes: 4

Esailija
Esailija

Reputation: 140210

The alerts are stopping the execution thread long enough for the response to come back. If your server took 10 seconds to respond and you closed the alerts after 5 seconds, it would not work.

The jQuery ajax function doesn't take a callback function just for fun to make your code more ugly, it takes it because the execution is asynchronous and the response is only guaranteed to be available inside the callback.

Run whatever code you need to run that depends on the response, inside the success callback function.

You have already done this with window.onload = function(){} <-- only the code inside that function is guaranteed to run after window has "loaded". The code outside it is just executed straight away sequentially. Do the same with ajax.

Upvotes: 3

Related Questions