How does the field update via Ajax?

0

I have the following question / problem: I have an ajax script that fetches the zip and fills some fields on the screen. One of them is the neighborhood.

Next I need to use the result of this field to perform another ajax search.

What's happening? When the second ajax call is made, the input neighborhood field is not yet populated. That is, the url being triggered the value that should be filled, is not.

I tried to create a local variable to store this information so that it can be used on the second call, and the result is still null.

What I noticed when I am on the page, at the end of the script, the data is displayed on the screen, so it is only at the end of the process that the screen is updated and so the input is still empty when I try to use it.

How do I make the field update at the same time as associating a value with it and can use it in the same event?

Below is my script (only part of it:

if(validacep.test(cep)) {

            //Preenche os campos com "..." enquanto consulta webservice.
            $("#logradouro-destino").val("...");
            $("#bairro-destino").val("...");
            $("#cidade-destino").val("...");
            $("#uf-destino").val("...");
            //$("#ibge").val("...");
            $('#info-cep').html('Logradouro');

            //Consulta o webservice viacep.com.br/
            $.getJSON("//viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {

                if (!("erro" in dados)) {
                    //Atualiza os campos com os valores da consulta.
                    $("#logradouro-destino").val(dados.logradouro.toUpperCase());
                    $("#bairro-destino").val(dados.bairro.toUpperCase());
                    $("#cidade-destino").val(dados.localidade.toUpperCase());
                    $("#uf-destino").val(dados.uf.toUpperCase());
                } //end if.
                else {
                    //CEP pesquisado não foi encontrado.
                    //limpa_formulário_cep();
                    $('#info-cep').html('Logradouro ***CEP não encontrado ***');
                }
            });
            // foco vai para o endereco
            $('#logradouro-destino').focus();
            var tipoItinerario = $('#tipo-itinerario').val();
            $('#valor-itinerario').val(0.00);

            if (tipoItinerario == 'K') {
                // buscar distancia
                var cepOrigem = $('#cep-origem').val();
                var cepDestino = $('#cep-destino').val();
                var url = '/calcular/' + cepOrigem + '/distancia/' + cepDestino;
                $.getJSON(url, function(dados){
                    $('#distancia-destino').val(dados);
                    buscarValor(dados);
                });
            } else if (tipoItinerario == 'A'){
                // esta chamada o campo #bairro-destino está nulo 
                var cliente = $('#cliente-id').val();
                var url = '/buscar/' + $('#bairro-destino').val() + '/valor/' + cliente + '/bairro';
                $.getJSON(url,function(dados){
                    $('#valor-destino').val(dados);
                    $('#valor-destino').maskMoney();
                });
            }
        } .
    
asked by anonymous 06.02.2018 / 13:34

1 answer

1

As you are working with an asynchronous method and need the result to continue its flow, you need to chain execution together with the callback of your first call.

And considering that execution is only desired on success, I put it next to block if (!("erro" in dados)) .

if (validacep.test(cep)) {

  //Preenche os campos com "..." enquanto consulta webservice.
  $("#logradouro-destino").val("...");
  $("#bairro-destino").val("...");
  $("#cidade-destino").val("...");
  $("#uf-destino").val("...");
  //$("#ibge").val("...");
  $('#info-cep').html('Logradouro');

  //Consulta o webservice viacep.com.br/
  $.getJSON("//viacep.com.br/ws/" + cep + "/json/?callback=?", function(dados) {

    if (!("erro" in dados)) {
      //Atualiza os campos com os valores da consulta.
      $("#logradouro-destino").val(dados.logradouro.toUpperCase());
      $("#bairro-destino").val(dados.bairro.toUpperCase());
      $("#cidade-destino").val(dados.localidade.toUpperCase());
      $("#uf-destino").val(dados.uf.toUpperCase());

      //Código que você quer executar apenas depois do resultado da consulta por CEP
      // foco vai para o endereco
      $('#logradouro-destino').focus();
      var tipoItinerario = $('#tipo-itinerario').val();
      $('#valor-itinerario').val(0.00);

      if (tipoItinerario == 'K') {
        // buscar distancia
        var cepOrigem = $('#cep-origem').val();
        var cepDestino = $('#cep-destino').val();
        var url = '/calcular/' + cepOrigem + '/distancia/' + cepDestino;
        $.getJSON(url, function(dados) {
          $('#distancia-destino').val(dados);
          buscarValor(dados);
        });
      } else if (tipoItinerario == 'A') {
        // esta chamada o campo #bairro-destino está nulo 
        var cliente = $('#cliente-id').val();
        var url = '/buscar/' + $('#bairro-destino').val() + '/valor/' + cliente + '/bairro';
        $.getJSON(url, function(dados) {
          $('#valor-destino').val(dados);
          $('#valor-destino').maskMoney();
        });
      }

    } //end if.
    else {
      //CEP pesquisado não foi encontrado.
      //limpa_formulário_cep();
      $('#info-cep').html('Logradouro ***CEP não encontrado ***');
    }
  });
}
    
06.02.2018 / 13:56