jQuery: wait until $.get() return the value

Question

This is my code example

var formValidate = function() {
  var url = 'someurl';
  var checkC = function (url, callback) {
    $.get(url, function( data ) {
      if(data.indexOf('OK') == 0) return callback('OK');
    })
  };
  checkC(url, function(data) {
    if(data == 'OK') return false;
  });
  return true;
}

My code is pretty similar to Adam Rackis's in this question Wait for jQuery $.get function to finish before running code. But unfortunately function dont wait for the data return. formValidate() just return true. I want use this function to check some conditions before sending data to server from form

form.on('submit', function(){
  if(formValidate()) form_send();
})

Can someone tell me where was I wrong in code above?

I post code here, truly there is no need in html, just to make `formValidate` to wait untill $.get() return some data... — user1128677, Jun 14 '16 at 14:29
Yeah, tried this, but the same result - function return true any way.... — user1128677, Jun 14 '16 at 14:34
Do you see any console errors? It can happen for many reasons... such as if the url not found 404 and others — Jaqen H'ghar, Jun 14 '16 at 14:49
Yep, but true anyway. Here https://jsfiddle.net/bst604jz/3/ `checkC` should return False every time. But i get True on submit — user1128677, Jun 14 '16 at 14:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114649/discussion-between-jaqen-hghar-and-user1128677). — Jaqen H'ghar, Jun 14 '16 at 14:53
you'll be waiting forever, because, it's never gonna return your data. — Kevin B, Jun 14 '16 at 15:19

Jaqen H'ghar · Accepted Answer · 2016-06-14T16:28:58.280

The first problem is that formValidate() return true synchronously regardless to the ajax request.

var formValidate = function() {
  .
  .
  .
  return true;
}

If you want the to wait for return your values from the callback functions. Here you should call form_send() from the success callback to make it wait for the asynch call. And you can actually make it much simpler without checkC() also. Change the code a bit and use done and fail promises:

var formValidate = function () {
  var url = 'someurl';

  $.get(url)
        .done(function (data) {
            if (data.indexOf('OK') == -1) {
                console.log("error");
                return;
            } 
            form_send();
        })
        .fail(function () {
            console.log("error");
            return;
        })
}

score 1 · Answer 2 · answered Jun 14 '16 at 15:16

You can't do this since $.get is called asynchronously.

var formValidate = function() {
   var url = 'someurl';
   var checkC = function (url, callback) {
       $.get(url, function( data ) {
           if(data.indexOf('OK') == 0) return callback('OK');
       });
   };


   checkC(url, function(data) {
      // this return to this enclosing callback function but not formValidate
      if(data == 'OK') return false;
   });

   //this is the only return statement for formValidate function
   return true;
}

A workaround i suggested is just call your form_send() in the callback, for example,

form.on('submit', formValidate);

And for your formValidate,

var formValidate = function () {
    var url = "someurl";
    $.get(url, function( data ) {
      if(data.indexOf('OK') == 0) {
          form_send();
      }
    });
};

jQuery: wait until $.get() return the value

2 Answers2