Question

So I have a JavaScript method that is ran after a user selects certain check-boxes. This method makes one AJAX call to render a “header” view, and then makes an AJAX call for each of the selected check-boxes, and then appends those views as well.

The issue is that when I’m looping through the check-boxes with JQuery and making an AJAX call for each of them, it’s just making a bunch of AJAX calls one after the other in the right order, but they get rendered at different times depending on how long each one takes. I guess this is the beauty of AJAX, but I need it to render in the order I call them for this specific task.

Here is the method:

function GenerateTermSheet()
{
    var urlString = "<%= System.Web.VirtualPathUtility.ToAbsolute("~/mvc/Indications.cfc/RenderPartialTermSheetView")%>";
    var jsonNickname = 
    {
        id : GetGUIDValue(),
        viewName : 'Nickname'
    }
    $.ajax({
        type: "POST",
        url: urlString,
        data: jsonNickname,
        success: function(data) {
            $('#termSheetPrinted').append(data);
        }
    });
    $('#termSheetPopup input[type="checkbox"]:checked').each(function(){
        var checkedName = $(this).attr("name");
        var json = 
        {
            id : GetGUIDValue(),
            viewName : checkedName
        }
        $.ajax({
            type: "POST",
            url: urlString,
            data: json,
            success: function(data) {
                $('#termSheetPrinted').append(data);
            }
        });
    })
    $('#termSheetPopup').dialog('close');
    $('#termSheetPrinted').dialog('open');
}

Know how I can do this? Thanks!

Answer 1

I would suggest placing the second AJAX call within a function that is called in the success function of the call that must be completed first. This will cause the second call to only execute if the first was successful, and will achieve the goal you were seeking.