Check for ajax call completion

Question

I'm having a problem filling and accessing a global variable with ajax. I have the following code (stripped down a bit):

var answers;

$(document).ready(function() {

   showResults();

   console.log(answers);

}

function showResults(){
    $.ajax({
        url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
        data: { action: "get_results" },
        type: "post",
        dataType: "json"
    }).done(function (data) {

        answers = data.questionary; 
        return answers;

    }); 
}

My question is the following: When I log answers in the done function it gives me a nice array. That would mean the array variable is filled. But when I log it from $(document).ready, It returns an empty variable. This is probably because the AJAX call is asynchronous, and the log gets executed before the variable is filled.

However, I need to use that variable on another page, so I need to access it from the $(document).ready ... Any idea about how to check if the variable is filled? Or when the showResults() is completed? Thanks in advance for your help!

Edit -

Thanks for your replies! But I'm still struggling with the following: As I understand, I can call another function from the ajax callback, and pass it the data. The thing is, I have to do a lot of different stuff with it after the call, and the only way I can get it to work now is by calling a function in the ajax callback, then calling another one from that one, etc...

So I end up wit showResults(); in the doc.ready, which then executes a lot of functions that are all "linked" together. Is there anyway I can return the data to the variable, for use in other places? I hope I have made this clear, English is not my native language, sorry.

normally, things can be done with callbacks so you may not have to access the variable in doc.ready. Can you explain a bit about "use that variable on other pages" ? — GingerJim, Apr 16 '13 at 11:11
Thanks for your reply! The problem I have is that I have to do a lot of things with the data I get from that ajax call. Maybe it is my lack of experience, but I can only get it working by calling another function from the callback, and then another one from that one, etc... I would like the ajax call to just fill a variable I can use in more place than one. I hope I made it clear, English is not my native language :( I've updated my question also. — Stefan Hagen, Apr 16 '13 at 21:25

score 1 · Answer 1 · answered Apr 16 '13 at 11:05

Execute the functionality that is dependent on the answers array after the AJAX call. Call your function from within done(..)

A very rough idea:

var answers;

function functionalityDependentOnAnswers() {
   //the code dependent on answers array.
}

$(document).ready(function() {

   showResults();

   //Move code here to functionalityDependentOnAnswers()
}

function showResults(){
    $.ajax({
        url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
        data: { action: "get_results" },
        type: "post",
        dataType: "json"
    }).done(function (data) {

        answers = data.questionary; 
        functionalityDependentOnAnswer();

    }); 
}

score 1 · Answer 2 · edited May 23 '17 at 12:12

1

You can use the when method provided by jQuery (look at this SO link).

Or look at this SO link where a similar situation is explained.

edited May 23 '17 at 12:12

Community

1
1

answered Apr 16 '13 at 11:05

akluth

8,393
5
38
42

score 0 · Answer 3 · answered Apr 16 '13 at 11:04

Check the documentation for success: this will only be executed when successful callback is done.

var answers;

$(document).ready(function() {
   showResults();
}

function showResults(){
    $.ajax({
        url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
        data: { action: "get_results" },
        type: "post",
        dataType: "json"
    }).when(function (data) {
       console.log(answers);
        answers = data.questionary; 
        return answers;

    }); 
}

Because he want to check _when_ the call is finished and not _if_ the call is finished correctly. — akluth, Apr 16 '13 at 11:07

score 0 · Answer 4 · answered Sep 25 '16 at 07:52

Idea: Have a hidden input field and add change listener to it.

<input type="hidden" id="answers_input" />

Now have a listener to this.

var answers;

$(document).ready(function() {
    $('#answers_input').on('change', function() {
     // trigger your custom code
     console.log(answers);
    })
   showResults();

   console.log(answers);

}

function showResults(){
    $.ajax({
        url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
        data: { action: "get_results" },
        type: "post",
        dataType: "json"
    }).done(function (data) {
        answers = data.questionary; 
        $('#answers_input').val(answers);
    }); 
}

Solution is kinda like a hack, let me know if this works for you

score -1 · Answer 5 · answered Apr 16 '13 at 11:07

-1

You're in the right way.

Do stuff with answers inside the DOM callback.

var answers;
$(document).ready(function() {
   showResults();
}

function showResults(){
    $.ajax({
        url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
        data: { action: "get_results" },
        type: "post",
        dataType: "json"
    }).done(function (data) {
        answers = data.questionary;
        console.log(answers);
        // Manage answers here
    }); 
}

answered Apr 16 '13 at 11:07

Flo Schild

5,104
4
40
55

1

`async:false` is a **very** bad advice! – UltraInstinct Apr 16 '13 at 11:08
1

As of version 1.8 using `asnyc: false` is deprecated, see http://api.jquery.com/jQuery.ajax/ – akluth Apr 16 '13 at 11:09
I agree with you guys, the best way is the first solution ! I removed the 2nd one, I knew it was a bad idea but not that is was deprecated, thanks ! – Flo Schild Apr 16 '13 at 11:09

Check for ajax call completion

5 Answers5