$.get() doesn't work first, works after

Question

I've got a mysterious problem ... I try to take a part of an external page and put it in a variable. Here is the code :

$.get(url, function( data ) {
     title = $(data).find('#layout-column_column-1 .journal-content-article').html();
}, 'html');
alert(title);

Using the javascript console on my browser (which is Chrome but that's the same on others), when I execute this code once, the alert(title) returns "undefined". Then if I run it again (or just the line alert(title)), I've got the result I expected.

Anyone has an idea ? :)

EDIT : sorry, the code I gave was not complete :

var a = $('a[target="_faq"]');
a.each( function() {
    [...]
    var title;
    $.get('url', function( data ) {
        title = $(data).find('#layout-column_column-1 .journal-content-article').html();
    }, 'html');
    $(this).attr('title', title);
}

welcome to the world of asynch processing – Arun P Johny Jul 24 '13 at 07:32 — Arun P Johny, Jul 24 '13 at 07:32
This isn't mysterious at all. This is how JavaScript works. – mekwall Jul 24 '13 at 07:33 — mekwall, Jul 24 '13 at 07:33

score 2 · Accepted Answer · edited May 23 '17 at 10:25

2

That is what asynchronous means.

$.get(url, function( data ) {
     title = $(data).find('#layout-column_column-1 .journal-content-article').html();
     alert(title);
}, 'html');

That means sending the request (or rather receiving the response) is taken out of the normal execution flow.

Heavily recommending @Felix's great answer: How do I return the response from an asynchronous call?.

edited May 23 '17 at 10:25

Community

1
1

answered Jul 24 '13 at 07:33

Suresh Atta

120,458
37
198
307

score 2 · Answer 2 · answered Jul 24 '13 at 07:33

It is because the $.get() sents an ajax request, which is processed asynchronously, which means that once the request is sent the next script will get executed without waiting for the response.

It is working in the second attempt because, the title is a global variable here. When the first request is sent the alert displays undefined and then when the response comes back updates the value of the title variable to the returned value. When the second attempt is made the request is sent again but when the alert is executed the title is already updated with the value from the first request so it gets displayed

In any async processing, the values returned by the async activity must be handled by a callback method.

score 1 · Answer 3 · answered Jul 24 '13 at 07:34

The get method (as well as ajax and post) is executed in "another thread" (between quotations because javascript isn't multithreaded).

The get method is called, then the request is started to execute, and the code proceeds to your alert(title), which is outside the asynchronous method and thus executed before the first one is ended.

Put your alert inside the get. Problem solved

$.get() doesn't work first, works after

3 Answers3