Jquery ajax function in side Jquery each function

Question

I have the following code:

$(document).ready(function () {

        $('div.env').each(function (index, item) {

            var vm = $(item).text();
            alert(vm);
            var url = "http://localhost:56656/HTML" + vm + ".htm";
            alert(url);
            $.ajax(url, {
                type: "GET",
                dataType: "html",
                success: function (data) {
                    alert("Colouring");
                    var style = $(data).filter('div').attr('style');
                    var styleObj = {};
                    $.each(style.split(';'), function () {
                        var rule = this.split(':');
                        styleObj[$.trim(rule[0])] = $.trim(rule[1]);
                    });

                    $(item).css('background', styleObj.background);

                },
                error: function () {
                    alert("Error");
                    $('div').css('background', '#f00');
                }
            });

        });

The problem is that I have an alert for each value inside the div class "env" before the Ajax function is executed.

What I want is, for each div, get the value, perform the ajax, get next next value. It seems the ajax is being performed entirely at the end.

Any help appreciated, Thanks.

I'm not sure what you mean. Are you saying that you want the AJAX calls to each wait for the previous AJAX call to complete before being executed? — David, Jul 09 '12 at 10:10

soupy1976 · Accepted Answer · 2012-07-09T10:19:53.037

0

Ajax calls are asynchronous by default, so your loop will continue to execute and quite possibly complete before even the first ajax call is completed.

Having ajax calls in a loop doesn't seem like a great way to go to be honest - If I was you I would try a different approach.

edited Jul 09 '12 at 10:19

answered Jul 09 '12 at 10:12

soupy1976

2,697
2
23
31

score 0 · Answer 2 · answered Jul 09 '12 at 10:12

This is what the callback functions you are already using are all about. They get called when the query is complete, e.g.

$.ajax(url, {
    type: "GET",
    dataType: "html",
    success: function (data) {
        /* this code will be run when the query is complete */
    },
    error: function () {
        /* this code will be run when the query fails */
    }
});

Try something like this:

$(document).ready(function () {

        $('div.env').each(function (index, item) {


            $.ajax(url, {
                type: "GET",
                dataType: "html",
                success: function (data) {
                    alert("Colouring");
                    var style = $(data).filter('div').attr('style');
                    var styleObj = {};
                    $.each(style.split(';'), function () {
                        var rule = this.split(':');
                        styleObj[$.trim(rule[0])] = $.trim(rule[1]);
                    });

                    $(item).css('background', styleObj.background);

                    var vm = $(item).text();
                    alert(vm);
                    var url = "http://localhost:56656/HTML" + vm + ".htm";
                    alert(url);

                },
                error: function () {
                    alert("Error");
                    $('div').css('background', '#f00');
                }
            });

        });

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

Set async: false on your ajax calls. It will be slower, but it will do what you want.

References:

edited May 23 '17 at 12:04

Community

1
1

answered Jul 09 '12 at 10:15

Conner

27,462
8
47
72

Jquery ajax function in side Jquery each function

3 Answers3

References: