CODEWITHSUNDEEP
jqueryajaxpromise
Myt
Myt

Reputation: 204

jQuery - to wait until function returns and then continue

I started having some issues with jQuery when I updated to version 1.10.2.

I've been searching for answers, but none of the methods seem to work, I am probably doing something wrong. I would really appreciate some help.

The main problem is that click event does not wait for the result of validateAjax and just says that validateBaan is undefined. I have checked validateAjax function and output gets value of true or false, but I guess by then click event has moved on. I would like the click event to wait for validateAjax result and then continue.

Click event:

$('#log-in').on('click', function() {

    // triggers validateAjax
    var validateBaan = validateAjax('fieldId', 'worker');

    // every time I log it says undefined, even though it gets value 
    // (true or false), but too late
    // console.log(validateBaan);

    // this function works
    var validateShift = checkInput({
        shift: {
            field: 'btn-group',
            hasClass: 'active',
            error: 'shifterror'
        }
    });
    // when both are true take some action
    if (validateBaan && validateShift) {
        ...
    }
});

Here is validateAjax function:

function validateAjax(fieldId, query) {

   var output;

   // field value
   var fieldValue = $('#' + fieldId).val();

   // sending ajax request
   var ajaxQuery = $.ajax({
     type: "GET",
     url: "update.php",
     data: 'checkup=checkup&baan=' + fieldValue
    });

   // based on the response, takes action
   ajaxQuery.done(function(response) {
      if (response.error) {
          output = false;
          $('.error-' + fieldId).html(response.error);
       } else if (response.product) {
          $.cookie('tab_name', response.product);
          output = true;
       } else {
          output = true;
       }
       return output;
   });
}

I have tried using jQuery when/then, but I did not manage to get it working.

I've never had problems like this with older jQuery versions, so I would appreciate all help .

Upvotes: 1

Views: 9528

Answers (3)

Praveen
Praveen

Reputation: 56501

Is that an ajax, then you can try using async: false

Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called.

Since deprecated, the most efficient way is to handle it using callback functions.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can use callback function, like

$('#log-in').on('click', function() {

    // triggers validateAjax
    // pass anonymus function to be called when ajax is complete
    var validateBaan = validateAjax('fieldId', 'worker', function(){

        // every time I log it says undefined, even though it gets value 
        // (true or false), but too late
        // console.log(validateBaan);

        // this function works
        var validateShift = checkInput({
            shift: {
                field: 'btn-group',
                hasClass: 'active',
                error: 'shifterror'
            }
        });
        // when both are true take some action
        if (validateShift) {
            ...
        }   
    });
});


function validateAjax(fieldId, query, callback) {
    var output;

   // field value
   var fieldValue = $('#' + fieldId).val();

   // sending ajax request
   var ajaxQuery = $.ajax({
     type: "GET",
     url: "update.php",
     data: 'checkup=checkup&baan=' + fieldValue
    });

   // based on the response, takes action
   ajaxQuery.done(function(response) {
      if (response.error) {
          output = false;
          $('.error-' + fieldId).html(response.error);
       } else if (response.product) {
          $.cookie('tab_name', response.product);

          //Call you function if condition is trure
          callback();
       }
   });
}

Upvotes: 3

Red Alert
Red Alert

Reputation: 3816

Set async to false:

var ajaxQuery = $.ajax({
 async: false,
 type: "GET",
 url: "update.php",
 data: 'checkup=checkup&baan=' + fieldValue
});

This will wait until the ajax command is finished before confining with your code.

Upvotes: 0

Related Questions