Stop the second ajax call before first one terminated

Question

$.ajax({
    method: "POST",
    //dataType: "json", //type of data
    crossDomain: true, //localhost purposes
    url: "./query/singlecourse.php", //Relative or absolute path to file.php file
    data: {id: i}, //passo i come parametro
    success: function(response) {
        var course=JSON.parse(response);
        var el1="";
        console.log(JSON.parse(response).length+" contenuti");
        el1="<br><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>"+course[0].title+"</p><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale {border-radius: 25px;   background-color: #d7dcfa;border: 4px solid #6e98f7;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><img src='http://hyp.altervista.org/images/courses/"+course[0].image+"'><br><br><br><p style='font-size:18px;line-height: 1;'>"+course[0].description+"</p></div>";   


        $instructorID=course[0].instructor;

        console.log($instructorID);
        $(".contenitore-dinamico").html(el1);

    },
    error: function(request,error)
    {
        console.log("Error");
    }
});
        console.log($instructorID);
 $.ajax({
    method: "POST",
    //dataType: "json", //type of data
    crossDomain: true, //localhost purposes
    url: "./query/singlecourse.php", //Relative or absolute path to file.php file
    data: {id: instructorID}, //passo instructor come parametro
    success: function(response) {
        var instructor=JSON.parse(response);
        var el1="";
        el1="<br><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale { background-color: #baa8ba;border: 2px solid #534053;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>Teacher of the course: "+instructor[0].name+" "+instructor[0].surname+"<img align='right' src='"+instructor[0].th_image+"'>";   
        $(".contenitore-dinamico").append(el1);

        console.log($instructorID);

    },
    error: function(request,error)
    {
        console.log("Error");
    }
});

}

My problem is that "Uncaught ReferenceError: $instructorID is not defined" cause the first ajax call works after the console.log. How can i stop for a while the rest of the code after ajax call? WIthout setTimeout if it's possible... i tried it but it was confusing. I want that only after the first ajax call the second starts. Thank you!

http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery — AmmarCSE, Jun 03 '15 at 16:05

Robert McKee · Answer 1 · 2015-06-03T16:13:01.593

Nest them?

$.ajax({
    method: "POST",
    //dataType: "json", //type of data
    crossDomain: true, //localhost purposes
    url: "./query/singlecourse.php", //Relative or absolute path to file.php file
    data: {
        id: i
    }, //passo i come parametro
    success: function(response) {
        var course = JSON.parse(response);
        var el1 = "";
        console.log(JSON.parse(response).length + " contenuti");
        el1 = "<br><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>" + course[0].title + "</p><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale {border-radius: 25px;   background-color: #d7dcfa;border: 4px solid #6e98f7;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><img src='http://hyp.altervista.org/images/courses/" + course[0].image + "'><br><br><br><p style='font-size:18px;line-height: 1;'>" + course[0].description + "</p></div>";


        $instructorID = course[0].instructor;

        console.log($instructorID);
        $(".contenitore-dinamico").html(el1);
        getInstructor($instructorID);
    },
    error: function(request, error) {
        console.log("Error");
    }
});

function getInstructor($instructorId) {
    $.ajax({
        method: "POST",
        //dataType: "json", //type of data
        crossDomain: true, //localhost purposes
        url: "./query/singlecourse.php", //Relative or absolute path to file.php file
        data: {
            id: instructorID
        }, //passo instructor come parametro
        success: function(response) {
            var instructor = JSON.parse(response);
            var el1 = "";
            el1 = "<br><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale { background-color: #baa8ba;border: 2px solid #534053;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>Teacher of the course: " + instructor[0].name + " " + instructor[0].surname + "<img align='right' src='" + instructor[0].th_image + "'>";
            $(".contenitore-dinamico").append(el1);

            console.log($instructorID);

        },
        error: function(request, error) {
            console.log("Error");
        }
    });
}

score 0 · Answer 2 · answered Jun 03 '15 at 16:08

You should put the second ajax call in the success callback of the first one. Then the second one will execute only after the successful completion of the first. SetTimeout is not a good choice in this scenario as you can never be sure when the call will complete.

score 0 · Accepted Answer · answered Jun 03 '15 at 16:08

0

Add property

async: false

in your first ajax call If you do in that way it will hault till the ajax call get completed.

answered Jun 03 '15 at 16:08

Rahul Khandelwal

94
14

This is not a good answer. You are doing a cross domain request, and it's not supported. From the jQuery docs: `Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.` Unless of course your `crossDomain: true` shouldn't be true as well. – Robert McKee Jun 03 '15 at 16:28

score 0 · Answer 4 · answered Jun 03 '15 at 16:09

0

AJAX is async function, it run non-blocking. In ajax function, add property "async:false" in your first ajax function. Hope it help you more

answered Jun 03 '15 at 16:09

Nhân Nguyễn

132
8

score 0 · Answer 5 · answered Jun 03 '15 at 16:09

    $.ajax({
    method : "POST",
    //dataType: "json", //type of data
    crossDomain : true, //localhost purposes
    url : "./query/singlecourse.php", //Relative or absolute path to file.php file
    data : {id : i}, //passo i come parametro
    success : function (response){
        var course = JSON.parse(response);
        var el1 = "";
        console.log(JSON.parse(response).length + " contenuti");
        el1 = "<br><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>" + course[0].title + "</p><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale {border-radius: 25px;   background-color: #d7dcfa;border: 4px solid #6e98f7;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><img src='http://hyp.altervista.org/images/courses/" + course[0].image + "'><br><br><br><p style='font-size:18px;line-height: 1;'>" + course[0].description + "</p></div>";
        $instructorID = course[0].instructor;
        console.log($instructorID);
        $(".contenitore-dinamico").html(el1);
        $.ajax({
            method : "POST",
            //dataType: "json", //type of data
            crossDomain : true, //localhost purposes
            url : "./query/singlecourse.php", //Relative or absolute path to file.php file
            data : {id : instructorID}, //passo instructor come parametro
            success : function (response){
                var instructor = JSON.parse(response);
                var el1 = "";
                el1 = "<br><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale { background-color: #baa8ba;border: 2px solid #534053;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>Teacher of the course: " + instructor[0].name + " " + instructor[0].surname + "<img align='right' src='" + instructor[0].th_image + "'>";
                $(".contenitore-dinamico").append(el1);
                console.log($instructorID);
            },
            error : function (request, error)
            {
                console.log("Error");
            }
        });

    },
    error : function (request, error)
    {
        console.log("Error");
    }
});

you simply execute second ajax call after first one finishes (when success function fires)

score 0 · Answer 6 · answered Jun 03 '15 at 16:10

0

Or you can use synchronous Ajax request. Set ajax async property to false.

jQuery.ajax({
         async:   false
    });

answered Jun 03 '15 at 16:10

yuk

945
7
14

`async: false` is incompatible with `crossDomain: true`. – Robert McKee Jun 03 '15 at 16:31

score 0 · Answer 7 · answered Jun 03 '15 at 16:13

0

You need to call second ajax inside first ajax success function like this,

//first ajax

success:function(response){   
  $.ajax({     
    //your code
  })
}

answered Jun 03 '15 at 16:13

Zeeshan

97
12

Stop the second ajax call before first one terminated

7 Answers7