Ajax starts too late... Really inconvenient

Question

I have this problem with AJAX. I run the code and the ajaxString is undefined when the code is printed even though the Ajax code is pretty much called before the return statement. When I try to retrieve AJAX after the HTML generation and printing, the AJAX is defined so it makes me think that the return is called before AJAX gets the chance to finish. Any way around this? Here is my current code:

var ajaxHTML;
function runCode(str) {
    if (str == 'SubmitB' || str == 'SubmitC' || str == 'SubmitD') {
        generateHTML(str);
    }
    else {
    $('#Holder1').html("");
    $('#Holder2').html("");
    $("#container_demo").fadeOut(500);
    setTimeout(function(){$("#menu_container").html(generateHTML(str))},500);
    $("#container_demo").fadeIn(500);
    }
}
function generateHTML(source){
if (source =='d') {
          return makeSchoolComboBox() + "Please Select a Level: <select id='selectedLevel'><option value='level1'>l1</option><option value='level2'>l2</option><option value='level3'>l3</option><option value='level4'>l4</option></select><br> <button id = 'r' onClick='runCode(this.id)'>Go back</button><button id = 'SubmitD' onClick='runCode(this.id)'>Submit</button>";
    }
function makeSchoolComboBox() {
    $.ajax({
            type: 'GET',
            url: 'phpQueries.php?q=fill_school_list',
            success: function (data) {
                ajaxHTML = data;
            }
        });
        return ajaxHTML;
}

Try as ajax param `async: true` or call the `makeSchoolComboBox()` as a callback to `runCode()` — toesslab, Apr 22 '14 at 11:17
You know the A in AJAX stands for Asynchronous right? The data isn't being returned in time for the `return` to work properly. You should probably use a callback. — Andy, Apr 22 '14 at 11:18

score 2 · Accepted Answer · answered Apr 22 '14 at 11:19

Since AJAX is asynchronous, you can't call it and then return straight after as the call is still taking place. You need to populate the menu container in the success callback, like this...

function runCode(str) {
    if (str == 'SubmitB' || str == 'SubmitC' || str == 'SubmitD') {
        generateHTML(str);
    }
    else {
        $('#Holder1').html("");
        $('#Holder2').html("");
        $("#container_demo").fadeOut(500);
        makeSchoolComboBox();
    }
}

function makeSchoolComboBox() {
    $.ajax({
        type: 'GET',
        url: 'phpQueries.php?q=fill_school_list',
        success: function (data) {
            $("#menu_container").html(data  + "Please Select a Level: " +
                "<select id='selectedLevel'>" +
                "<option value='level1'>l1</option>" +
                "<option value='level2'>l2</option>" +
                "<option value='level3'>l3</option>" +
                "<option value='level4'>l4</option>" +
                "</select><br> <button id = 'r' onClick='runCode(this.id)'>Go back</button>" +
                "<button id = 'SubmitD' onClick='runCode(this.id)'>Submit</button>").fadeIn(500);
        }
    });
}

score 0 · Answer 2 · answered Apr 22 '14 at 11:19

ajax query is asynchronous

function makeSchoolComboBox(next) {
  $.ajax({
    type: 'GET',
    url: 'phpQueries.php?q=fill_school_list',
    success: next
  });
}

and run it as

makeSchoolComboBox(function(ajaxHTML){
  //manipulations with here
})

Or you can pass async: false in your $.ajax, but all stops while ajax request processed in this case

Chris Dixon · Answer 3 · 2014-04-22T11:41:43.203

0

If you need to keep the structure you're using (I'd make generateHTML and makeSchoolComboBox into a single function to keep it simple) then you can use promises.

Your code would then become:

function generateHTML(source){
if (source =='d') {
          makeSchoolComboBox().then(function(data) {
              return data + "Please Select a Level: <select id='selectedLevel'><option value='level1'>l1</option><option value='level2'>l2</option><option value='level3'>l3</option><option value='level4'>l4</option></select><br> <button id = 'r' onClick='runCode(this.id)'>Go back</button><button id = 'SubmitD' onClick='runCode(this.id)'>Submit</button>";
          });
    }
}

function makeSchoolComboBox() {
     var d = new $.Deferred();

     $.ajax({
             type: 'GET',
             url: 'phpQueries.php?q=fill_school_list',
             success: function(data) {
                 return d.resolve(data);
             }
     });
}

edited Apr 22 '14 at 11:41

answered Apr 22 '14 at 11:23

Chris Dixon

9,147
5
36
68

I really want to use your solution but I get this error: TypeError: Cannot call method 'then' of undefined – Maciej Musialek Apr 22 '14 at 11:29
First all `$.ajax` already returns a promise. Second, even if you use the deferred anti pattern, you're using it incorrectly (not returning `d`) – Benjamin Gruenbaum Apr 22 '14 at 11:33
My bad, code updated. – Chris Dixon Apr 22 '14 at 11:41

Ajax starts too late... Really inconvenient

3 Answers3