Jquery how to do a function after an ajax request

Question

I have 3 ajax request that get a response from a web service, I then want to use these response and inject it into the document.load. When I try to inject the html noting changes. I think I need to have sometype of callback but I do not know how to do this. Thanks,

$(document).ready(function prepareDocument() {
    var pageId = getPageId();
    var ratingHtml = '<div id="rating" class="rating" data-role="rating" data-param-vote="on" data-param-rating="3" onclick="confrimRatingInsert()"></div><p>#ofRatings</p>';
    canEditRating(pageId, function (data) {
        if (data.msg == null) {
            canEdit = data.result;
            if (canEdit == false) {
                ratingHtml = ratingHtml.replace('data-param-vote="on"', "");
            }
        }
        else {
            displayDialogBox("Error", data.msg);
        }
    });
    getAverageRating(pageId,function(data) {
        if (data.msg == null) {
            averageRating = data.result;
            ratingHtml = ratingHtml.replace('data-param-rating="3"', 'data-param-rating="' + averageRating + '"');
        }
        else {
            displayDialogBox("Error",data.msg);
        }      
    });
    getNumberOfRatings(pageId, function (data) {
        if (data.msg == null) {
            numberOfRatings = data.result;
            ratingHtml = ratingHtml.replace('#ofRatings', "( " + numberOfRatings + " sRatings)");
        }
        else {
            displayDialogBox("Error", data.msg);
        }
    });
    alert(ratingHtml);
});
function canEditRating(pageId,fn) {
    $.ajax({
        url: "../services/rating.ashx?action=canEditRating&pageId=" + pageId,
        dataType: "json",
        type: "GET",
        data: {},    
        success: function (data) {
            fn(data);
        },
        error: function (err) {
            displayDialogBox("Error", err.toString());
        }
    });
}
function getAverageRating(pageId, fn) {
    $.ajax({
        url: "../services/rating.ashx?action=getAverageRating&pageId=" + pageId,
        dataType: "json",
        type: "GET",
        data: {},
        success: function (data) {
            fn(data);
        },
        error: function (err) {
            displayDialogBox("Error", err.toString());
        }
    });
}
function getNumberOfRatings(pageId, fn) {
    $.ajax({
        url: "../services/rating.ashx?action=getNumberOfRatings&pageId=" + pageId,
        dataType: "json",
        type: "GET",
        data: {},
        success: function (data) {
            fn(data);
        },
        error: function (err) {
            displayDialogBox("Error", err.toString());
        }
    });
}

first of all make sure that your 3 independent ajax requests are valid i.e. they make successful request to the server and server returns appropriate response. — Manish Mishra, Jun 13 '13 at 12:53
I don't see any point at which you write `ratingHtml` into the page. Nor do you ever wait for each AJAX call to finish before starting the next. — Alnitak, Jun 13 '13 at 12:53
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Alnitak, Jun 13 '13 at 12:57

score 0 · Accepted Answer · answered Jun 13 '13 at 12:58

Ajax is asynchronous, when you call alert(ratingHtml);, the responses have not arrived yet. Therefore, nothing changes at this point. But you provide callbacks to your 3 ajax calls and these 3 callbacks will be called later and change the ratingHtml. In other words, in your case, the ratingHtml will be updated, but not when you call alert(ratingHtml);

Jquery how to do a function after an ajax request

1 Answers1