CODEWITHSUNDEEP
javascriptjqueryajax
Dr.Avalanche
Dr.Avalanche

Reputation: 1996

Wait for AJAX response before moving on with script

I have a script which runs 2 AJAX calls, the first checks that a record exists within a database. If it does this should not move on and the script should stop. The second submits a job.

My problem is that the job is being submitted before the first AJAX call has returned. My code looks something like this:

if (recordid) {
    var request = $.ajax({
        context: document.body,
        url: URLGOESHERE,
        data: {
            recordID: recordid
        },
        success: function( data ){
            if (data.Response == "Success") {
                var noresults = data.Results;
                if (noresults > 0){
                    alert('this record id already exists!');
                    return false;
                }
            } else {
                alert('an error occured');
                return false;
            }
        }
    });
} else {
    alert('enter a record id');
    return false;
}   

// second ajax call goes here, which gets called regardless of the output of the ajax call above

Upvotes: 0

Views: 7047

Answers (4)

Kuldeep Kumawat
Kuldeep Kumawat

Reputation: 56

try this: make async propety false 

if (recordid) {
    var request = $.ajax({
        context: document.body,
        url: URLGOESHERE,
        data: {
            recordID: recordid
        },
        async : false, //added this
        success: function( data ){
            if (data.Response == "Success") {
                var noresults = data.Results;
                if (noresults > 0){
                    alert('this record id already exists!');
                    return false;
                }
            } else {
                alert('an error occured');
                return false;
            }
        }
    });
} else {
    alert('enter a record id');
    return false;
}

OR perform second ajax call in success function of first ajax call i.e. see comment

if (recordid) {
        var request = $.ajax({
            context: document.body,
            url: URLGOESHERE,
            data: {
                recordID: recordid
            },
            success: function( data ){
                if (data.Response == "Success") {
                    var noresults = data.Results;
                    if (noresults > 0){
                        alert('this record id already exists!');
                        return false;
                    }
                    //perform 2nd ajax call here
                } else {
                    alert('an error occured');
                    return false;
                }
            }
        });
    } else {
        alert('enter a record id');
        return false;
    }

Upvotes: 0

M.Tanzil
M.Tanzil

Reputation: 1995

You have to use jquery promise function for that which will wait for the first ajax request to complete then make another ajax request.

JQUERY PROMISE

OR

Put the second ajax request in the success function of first one, and make it happen when you want it to fire

 if (recordid) {
    var request = $.ajax({
    context: document.body,
    url: URLGOESHERE,
    data: {
        recordID: recordid
    },
    success: function(data) {

        //check here if you want to call submitJob or not
        if (noresults > 0){ return false }
        else { Job(); };

    }

   });

  } else {
     alert('enter a record id');
     return false;
   }

      function Job() {
             //another ajax call.
       }

Hope it helps :)

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

if (recordid) {
    var request = $.ajax({
        context: document.body,
        url: URLGOESHERE,
        data: {
            recordID: recordid
        },
        success: function(data) {

            //check here if you want to call submitJob or not
            //and call submitJob()
        }

    });

} else {
    alert('enter a record id');
    return false;
}

//call this ajax once you varified your condition from success callback of first one
function submitJob() {

    //second ajax call goes here
}

Upvotes: 0

ADyson
ADyson

Reputation: 61794

Instead of putting the call to the second ajax method at the bottom of your code (where the comments currently are), put it in the "success" function of your first call. This method will only execute once the first call has finished. This is the only way to ensure that the second call does not happen too early. Ajax calls run asynchronously, so the normal flow of the browser is not interrupted. This is deliberate so that long-running calls don't lock up the browser for the user.

Upvotes: 1

Related Questions