jquery wait on response

Question

It's been awhile since I worked with query and I can't for the life of me figure out why this isn't waiting on the response. I looked for answers similar to this post. I must be missing something pretty simple.

The calling function:

$('#cappuccino-button').click(function () {
    $('#screen-one').hide();    
    var hasMilk = IsThereMilk();
    if (hasMilk) {
        $('#cappuccino-success').show();
    } else {
        $('#milk-fail').show();
    }
}

The function itself:

function IsThereMilk() {
    $.ajax({
        url: 'http://milkstore/gotany',
        type: 'GET',
        async: false,
        success: function(data){ 
            console.log('*****AJAX' + data.hasMilk);
            return data.hasMilk;
        }
    });
}

Can anyone help me identify why my calling function isn't waiting on the ajax request?

guest271314 · Accepted Answer · 2016-06-24T04:23:09.383

2

IsThereMilk() call does not actually return a value. Though if $.ajax() was returned the value would be a jQuery promise object, not a Boolean.

Try adjusting js, to return $.ajax() from IsThereMilk() call, .then() to check if response data.hasMilk

function IsThereMilk() {
    return $.ajax("http://milkstore/gotany");
}

$("#cappuccino-button").click(function () {
    $("#screen-one").hide();    
    var hasMilk = IsThereMilk();
    hasMilk.then(function(data) {
      if (data.hasMilk) {
        $("#cappuccino-success").show();
       } else {
        $("#milk-fail").show();
       }
    })
})

jsfiddle https://jsfiddle.net/r8hc6nna/

edited Jun 24 '16 at 04:23

answered Jun 24 '16 at 04:04

guest271314

1
15
104
177

would the `return data.hasMilk;` not work for the return? – Jon Harding Jun 24 '16 at 04:06
@JonHarding _"would the return data.hasMilk; not work for the return?"_ No, not as a value returned from within `$,ajax()` that would be returned from `IsThereMilk`. `$.ajax()` is asynchronous, `$.ajax()` returns a jQuery promise object which can be accessed at `.then()`, `.done()`, `.always()`, `.fail()` – guest271314 Jun 24 '16 at 04:14
when returning $.ajax do you not need to include the success / fail properties? – Jon Harding Jun 24 '16 at 04:23
@JonHarding No, you can use `.then()`, `.done()` to handle resolved promise, `.always()` to handle both resolved or rejected promises, `.fail()` to handle rejected promise. See updated post, https://jsfiddle.net/r8hc6nna/ – guest271314 Jun 24 '16 at 04:24

score 0 · Answer 2 · answered Jun 24 '16 at 04:07

Have you try to move the condition hasMilk in ajax success?

function IsThereMilk() {
    $.ajax({
        url: 'http://milkstore/gotany',
        type: 'GET',
        async: false,
        success: function(data){ 
            console.log('*****AJAX' + data.hasMilk);
            if (data.hasMilk) {
               $('#cappuccino-success').show();
            } else {
               $('#milk-fail').show();
            }
        }
    });
}

$('#cappuccino-button').click(function () {
    $('#screen-one').hide();    
    IsThereMilk();
}

no the milk function needs to be reused by multiple functions — Jon Harding, Jun 24 '16 at 04:24

score 0 · Answer 3 · answered Apr 03 '19 at 11:16

Jquery when can be used to achieve similar results. This is first piece of code that I've written that uses when

$.when( loadMoreComms() ).then(function( data, textStatus, jqXHR ) {
                        {#var comsect = $('#comment-box-section');#}
                        $('.loader').css('display', 'none');
                    });

and this is my loadmoreComms()

function loadMoreComms() {
            return $.ajax({*put you ajax code here*});
}

jquery wait on response

3 Answers3