Jquery ajax in loop

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?

Answers


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

}

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

            // ...
        }
    });
}

Need Your Help

problems when deploying WebDSL app to Tomcat v6.0

eclipse tomcat web eclipse-plugin tomcat6

I get the following error while deploying my webDSL app to Tomcat v6.0 using the WebDSl eclipse plugin

Server disconnected (code: 1006) openstack

console vnc openstack

Trying to connect to my VM instance when all of a sudden I get this error from the console:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.