Question

I have a set of text files representing a table of data from a third party that I’d like to download using a JavaScript application. They look something like this:

col1 col2 .. coln
vala valb .. valz
valA valB .. valZ
etc..

I’ve been trying to use jQuery to do this. I’ve been able to use $.load, but I don’t want to store the data in the DOM, instead I’d like to parse it out into an object. Whenever I try to use an of the ajaxy methods I’m getting an error I don’t understand. For example:

var myData;
$.ajax({
    type: 'GET',
    url: $(this).attr('source'),
    dataType: 'html',
    success: function(data) {
        myData = data;
    }
});
alert(myData);

Gives me an undefined value for myData. Any suggestions would be appreciated.

Answer 1

For that code to work the event needs to be syncrounus, in other word, set async: false in the $.ajax-call. The problem comes because ajax is normally async, meaning that when you do the alert, the request might, or might not have finished. Normally though, it won’t cause it takes longer time to fetch a page than to do a function-call. So, by setting async: false, you tell jquery (and the ajax-handler) to wait till the page is finished loaded before you try to alert the data. Another method to achieve the same effect is to do something like this:

var myData;
function fin(data) {
    myData = data;
    alert(myData);
}
$.ajax({
    type: 'GET',
    url: $(this).attr('source'),
    dataType: 'html',
    success: fin
});

This approach is probably better than to set async to false, because it won’t make the browser hang while waiting for the page your loading. However, asynchronous programming is not something that is easy to learn, therefore many will find it easier to use async: false.