Process Ajax queue code then continue

Question

So, I'm using JQuery AjaxQueue to do stuff, but the problem I have is that I can't figure out how to make it continue only after the entire queue is done. I want it to look through the table checking if stuff is deleted, then after its finished continue. What's happening now is that the stuff in the queue will be processed at the same time as the stuff around it so it doesn't do the ajax calls before continuing.

    var outputString = "";
    $('#errors').html("");

    $("#deletingitems tbody tr").each(function() {
        if(rowCounter == 1) {
            htmltext.append(TopofHTMLPage());
        }

        var tableValA = $(this).find("td").eq(0).html();
        var tableValB = $(this).find("td").eq(1).html().split("/")[0];

        $.ajaxQueue({
            type: "POST",
            url: "@Url.Content("~/webservices/retrieve.asmx/Get")",
            data: "{'index': '" + tableValA + "', 'identity': '" + tableValB + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

                //http://encosia.com/2009/06/29/never-worry-about-asp-net-ajaxs-d-again/
                if (msg.hasOwnProperty("d")) {
                    // Leave the .d behind and pass the rest of
                    //  the JSON object forward.
                    outputString = msg.d;
                    $('#errors').append(outputString);
                    if(obj.valA != null) {
                        htmltext.append('<tr>');
                        htmltext.append('<td>' + obj.valA + '</td>');
                        htmltext.append('<td>' + obj.valB + '</td>');
                        htmltext.append('<td>' + obj.valC + '</td>');
                        htmltext.append('<td>' + obj.valD + '</td>');
                        htmltext.append('<td>' + obj.valE + '</td>');
                        htmltext.append('</tr>');
                    }
                }
            }
            , error: AjaxFailed
        });

        if(rowCounter == 10) {
            htmltext.append(BottomofHTMLPage());
            rowCounter = 1;
        }
        else {
            rowCounter++;
        }
    });
    // Add rows until 10 rows
    while(rowCounter <= 10) {
        htmltext.append('<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
        rowCounter++;
    }

    htmltext.append(BottomofHTMLPage());

    htmltext.append('</body>');
    htmltext.append('</html>');
    var page =  window.open('','NewHTMLPage','width=1500,height=600,scrollbars=yes');
    page.document.open();
    page.document.write(htmltext.toString());
    page.document.close();

@Gary `stringVal` is going to be appended to a htmlstring that I've created that will be used to create a new page that will pop up. — Bob., Jun 09 '11 at 12:37

score 0 · Accepted Answer · answered Jun 09 '11 at 12:31

0

I'm not familiar with AjaxQueue but it looks like you can acheive what your doing simply with jQuery core, just use a callback:

var gotAttribute = function(attr)
{
    $("#deletingitems tbody tr").each(function() {
        if (this.value == 1) {
            // Do stuff with attr?
        }
    }
};

// jQuery will pass the result onto gotAttribute once available
$.ajax({ success: gotAttribute });

answered Jun 09 '11 at 12:31

Gary Green

22,045
6
49
75

This would do the reverse, it would call ajax then check the table, I want to check the table, then pass the value from the table into the ajax. – Bob. Jun 09 '11 at 12:41
I see what you mean. What have you got inside `$.ajaxQueue`? – Gary Green Jun 09 '11 at 12:44
[ajaxQueue](http://stackoverflow.com/questions/3034874/sequencing-ajax-requests/3035268#3035268) (see link) is just code written to simulate a queue of Ajax calls. Inside it, I'm using the values from the table and calling a WebService to check if the entry with those values exist in the database, and then return a message saying if it exists or not. – Bob. Jun 09 '11 at 12:47
Yes, I would like to see what properties your calling ajaxQueue with, because there should be a `success` function that you can use – Gary Green Jun 09 '11 at 12:50
Edited code, there is a success for the ajax. What's happening now is that the stuff that gets pushed to the htmltext string seems to be appended at the end, and not before the closing of the html tags – Bob. Jun 09 '11 at 12:59

score 0 · Answer 2 · edited May 23 '17 at 10:34

Ajax is asynchronous (as should be ajaxQueue, otherwise it wouldn't be ajax). That means when you make a request, your code continues while ajax fetches the requested data. Your callbacks will be executed when the data is ready, and that will happen after your main-line code is complete (check out Is JavaScript multithreaded?). So that's why your table rows are appearing after the closing html tags.

To solve your problem, you'll need to pull your closing code into the callback and detect when the last request has completed.

jQuery(function ($) {
    var i = 0;
    $('tr').each(function () {
        i++;
        $.ajax({
            url: 't.html',
            success: function (data) {
                console.log('serving: ' + i);
                if(--i <= 0) {
                    console.log('which was the last');
                }
            }
        });
    });
});

The same should apply to ajaxQueue.

Process Ajax queue code then continue

2 Answers2