Error: undefined after one ajax request inside another

1

Follow the code:

$("#l_linha").change(function(){
    var linha = $(this).val();
    var dados = $("#l_linha").serialize();
            $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'buscarPonto.php',
            async: true,
            data: dados,
            success: function (response) {
                console.log(response);

                for(i = 0; i < response.length; i++){
                var localizacao = new Array(response.length);

                localizacao[i] = L.latLng(response[i].lat, response[i].lng);

                console.log(localizacao[i]);

                $("#r_ponto").val(response[i].id);
                var ponto = new Array();
                ponto[i] = $("#r_ponto").serialize();
                var address = new Array();
                address[i]= response[i].address;
                var ultimo = new Array();
                var proximo = new Array();

                $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'buscarHorario.php',
                async: true,
                data: ponto[i],
                success: function (response) {
                        console.log(localizacao[i]);
                    for(j = 0; j < response.length; j++){
                        ultimo[j] = response.ultimo;
                        proximo[j] = response.proximo;
                    }
                }
                });
                L.marker(localizacao[i], {icon: icone}).addTo(map).bindPopup(address[i] +'<br><span>Próximo horário:'+ ultimo[j] +'</span>').openPopup();
            }
        });
});

The problem is that the last variable [j] gets undefined. And if I do the part:

L.marker(localizacao[i], {icon: icone}).addTo(map).bindPopup(address[i] +'<br><span>Próximo horário:'+ ultimo[j] +'</span>').openPopup();

into the for (j = 0; j

asked by anonymous 01.10.2018 / 16:02

1 answer

1

Yes, the second request will get undefined data in this code:

$("#l_linha").change(function(){
    var linha = $(this).val();
    var dados = $("#l_linha").serialize();
            $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'buscarPonto.php',
            async: true,
            data: dados,
            success: function (response) {
                console.log(response);

                for(i = 0; i < response.length; i++){
                var localizacao = new Array(response.length);

                localizacao[i] = L.latLng(response[i].lat, response[i].lng);

                console.log(localizacao[i]);

                $("#r_ponto").val(response[i].id);
                var ponto = new Array();
                ponto[i] = $("#r_ponto").serialize();
                var address = new Array();
                address[i]= response[i].address;
                var ultimo = new Array();
                var proximo = new Array();

                $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'buscarHorario.php',
                async: true,
                data: ponto[i],
                success: function (response) {
                        console.log(localizacao[i]);
                    for(j = 0; j < response.length; j++){
                        ultimo[j] = response.ultimo;
                        proximo[j] = response.proximo;
                    }
                }
                });
                L.marker(localizacao[i], {icon: icone}).addTo(map).bindPopup(address[i] +'<br><span>Próximo horário:'+ ultimo[j] +'</span>').openPopup();
            }
        });
});

Well, the success is when there is success in the request, then the second continues without waiting for the first one, since the Ajax is asynchronous * and because it is asynchronous it happens simultaneously with other requests .

To correct put within the complete clause:

try this:

$("#l_linha").change(function(){
    var linha = $(this).val();
    var dados = $("#l_linha").serialize();

            $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'buscarPonto.php',
            async: true,
            data: dados,
            success: function (response) {
                console.log(response);

                for(i = 0; i < response.length; i++){
                var localizacao = new Array(response.length);

                localizacao[i] = L.latLng(response[i].lat, response[i].lng);

                console.log(localizacao[i]);

                $("#r_ponto").val(response[i].id);
                var ponto = new Array();
                ponto[i] = $("#r_ponto").serialize();
                var address = new Array();
                address[i]= response[i].address;
                var ultimo = new Array();
                var proximo = new Array();

            }
        }).done(function() {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'buscarHorario.php',
                async: true,
                data: ponto[i],
                success: function (response) {
                        console.log(localizacao[i]);
                    for(j = 0; j < response.length; j++){
                        ultimo[j] = response.ultimo;
                        proximo[j] = response.proximo;
                    }
                }
                });
                L.marker(localizacao[i], {icon: icone}).addTo(map).bindPopup(address[i] +'<br><span>Próximo horário:'+ ultimo[j] +'</span>').openPopup();

        });;
});

In the documentation for jQuery says: " complete callback, when the request ends"

    
01.10.2018 / 21:34