Jquery ajax in loop

Question

I am writing a Sql convertor which handles mysql to mongodb. I am writing an interface to my converter with ajax.

Ajax is handling huge convertions. This put limit to mysql select code and make convertions parted by 1000 at a time.

my code is :

$(document).ready(function()
{
<!--Start JQuery Ajax Requests-->
var pages;
var type;
$("input").click(function(event) {
    pages = $(this).attr("icr");
    type = $(this).attr("id");
    runRequest(0);
});

function runRequest(num){

    if (num > 3){
    $("#console").append("Finish!!!");
    return;
    }

    $.ajax
    ({
    type: "POST",
    url: "#",
    async: false,
    data: "type="+type+"&page="+num*1000,
    success: function(msg){
        $("#console").ajaxComplete(function(event, request, settings)
        {
            $("#console").append(msg);
            runRequest(num+1);
        });
    }
    });
}
});

this code have to run 3 times of the same function and send the limit number by multiplying it. But somehow runRequest's num variable never reaches the 3, firebug console shows num as 1 or sometimes 2 and it repeats infinite. How to avoid it and make it run only 3 syncronised calls?

I don't think so that the "ajaxComplete" method must be declare into your "success" callback : it is redondant with the current callback. Just try to comment this line and let us know how it works — sdespont
– sdespont, Commented Sep 8, 2012 at 17:52
you mean should i comment the ajaxcomplete method? like this //$("#console").ajaxComplete(function(event, request, settings) — Ejderha Katili
– Ejderha Katili, Commented Sep 8, 2012 at 17:58
Yes, the fact is that you declare a new handler each time you reach the success callback. It could generate some problem. — sdespont
– sdespont, Commented Sep 8, 2012 at 17:59
Not a bug, a mis-use of the api. See my answer for a fuller explanation . (and props to Bouillou for a beating me to the punch :-) ) — Patrick M
– Patrick M, Commented Sep 8, 2012 at 18:05

dan-klasson · Accepted Answer · 2013-07-16 12:21:58Z

2

Here's another way:

for(i=0; i<5; i++) {
    $.ajax({
        type: "GET",
        url: '/api/foo/?bar=' + i,
        ajaxI: i,
        success: function(widgets) {
            x = this.ajaxI; // now you can use x instead of i

            // ...
        }
    });
}

edited Jul 16, 2013 at 12:21

answered May 9, 2013 at 23:19

dan-klasson

14.3k14 gold badges67 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Patrick M · Accepted Answer · 2012-09-08 18:04:21Z

I believe the problem is your use of .ajaxComplete(). According to the jQuery docs, it is a separate event handler registration method. In other words, your success function is registering an event to fire upon the next completion. I think this would also cause your first data set to be thrown away.

An additional note, you're using the data parameter to pass in data. This is supposed to be an object, not a query string. If you use a GET Ajax call, it gets converted to a query string. url: "?type="+type+"&page="+num*1000, and data: { "type": type, "page": num*1000 } are equivalent.

Try rewriting it this way:

$.ajax({
    type: "POST"
    url: "#",
    async: false,
    data: { "type": type, "page": num*1000 },
    success: function(msg) {
        $("#console").append(msg);
        runRequest(num+1);
    });
}

The .ajaxComplete() method is more for the purpose of inserting a separate function call or behavior into every ajax success handler (when you have many such requests on the same page and want each of them to append to the console, in addition to doing their normal callback). Like this:

$(document).ready(function()
{
    $("#console").ajaxComplete(function(event, request, settings)
    {
        // $(this) is pointing to the #console ID because the function is bound to it
        $(this).append('Triggered ajaxComplete handler. The result is ' +
                 xhr.responseHTML);
        runRequest(num+1);
    });
    // variables

    // document event bindings/handlers

    // Ajax functions (you could move this outside of the .ready function

}

Collectives™ on Stack Overflow

Jquery ajax in loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related