2

Bom dia, estou tento problemas ao pegar os valores de um select Box da minha tela, a situação é a seguinte, eu crio a pagina normalmente com os valores default nos select Box ex: Carregando... pois com base nas permissões do usuário ele vai poder alterar o valor do Select Box ou não, enfim primeiramente eu executo uma função que seta os valores no select Box e a função em seguida pega o valor desse select Box para fazer consultas ao banco, o problema é que a segunda função pega os valores default Carregando... e não o valor que eu setei isso acontece pois a segunda função pega o valor antes da primeira função recriar o componente correto, eu tentei usar um setTimeOut para aguardar uns 2 segundos para então executar a segunda função, nesse caso funcionou mas me pareceu gambiarra, então tentei usar uma Promise mas a promise retornou positivo mesmo não ter realmente finalizado a construção do componente. segue meu codigo: html:

  </div>
      <div class="row">
        <div class="col-xl-3 col-md-3 col-sm-12 mb-4">
          <div class="input-group mb-3" id="divSelectPacotes">
            <select class="custom-select" id="selectPacotes">
              <option value="0" selected >PACOTE</option>
            </select>
          </div>
        </div>
        <div class="col-xl-3 col-md-3 col-sm-12 mb-4">
          <div class="input-group mb-3" id="divSelectDepartamentos">
            <select class="custom-select" id="selectDepartamentos">
              <option value="0" selected>DEPARTAMENTO</option>
            </select>
          </div>
        </div>
        <div class="col-xl-3 col-md-3 col-sm-12 mb-4">
          <div class="input-group mb-3" id="divSelectFilial">
            <select class="custom-select" id="selectFilial">
              <option value="0" selected>FILIAL</option>
            </select>
          </div>
        </div>
        <div class="col-xl-3 col-md-3 col-sm-12 mb-4">
          <div class="input-group mb-3" id="divSelectMes">
            <select class="custom-select" id="selectMes">
              <option value="0" selected>MÊS</option>
            </select>
          </div>
        </div>
      </div>

Javascript:

$(document).ready(function () {
comboBox(); //Seta os valores nos select Box
cards();  // Executa consulta no banco com parametros retornado do select Box
tabela(); // Executa consulta no banco com parametros retornado do select Box
graficoMetaPacote(); // Executa consulta no banco com parametros retornado do select Box
graficoComparaPacote(); // Executa consulta no banco com parametros retornado do select Box

});

Achei uma função que não sei dizer se foi o jeito certo de resolver: foi chamando as outras funções dentro da primeira, dessa forma:

function comboBox() {
    pageurl = 'consultas/sql/comboBox.php';
    $.ajax({
        url: pageurl,
        type: 'GET',
        cache: false,
        dataType: 'json',
        error: function (result) {
            console.log('erro ao trazer os valores nos comboBox\n' + result);
        },
        success: function (result) {

            // console.log(result);
            var resultado = [];
            for (var i in result) {
                resultado.push(result[i]);
            }
            //Trás os valores para os select Box ==========================================================
            $("#divSelectPacotes").html(resultado[0]);
            $("#divSelectDepartamentos").html(resultado[1]);
            $("#divSelectFilial").html(resultado[2]);
            $("#divSelectMes").html(resultado[3]);
            
            cards();  // Executa consulta no banco com parametros retornado do select Box
            tabela(); // Executa consulta no banco com parametros retornado do select Box
            graficoMetaPacote(); // Executa consulta no banco com parametros retornado do select Box
            graficoComparaPacote(); // Executa consulta no banco com parametros retornado do select Box
        }
    })
   
};

Se alguém tiver uma ideia melhor por favor me avisa, Obrigado!

1
  • 2
    pelo ajax ser async a melhor opção é colocar as outras funções dentro do success mesmo, ou então desativar o async do ajax (não recomendado) 7/08/2020 às 14:19

1 Resposta 1

2

Se você está fazendo uma requisição é necessário esperar a resposta do servidor para realizar as outras operações já que elas necessitam desses dados, de modo Síncrono, e você já fez isso com o .ajax() e o callback success

Outra maneira seria você ter usado o retorno da Promise do .ajax() e criado uma chain com os outros métodos do objeto jqXHR, que não é uma Promise nativa, mas mantem a interface.. Podendo ter feito:

$.ajax({url: 'consultas/sql/comboBox.php', cache: false, dataType: 'json'})
    .then((result) => { 
        // Outras consultas
    }, () => console.log('erro ao trazer os valores nos comboBox'))

As subsequentes funções realizam as outras consultas de modo Assíncrono, são colocadas na event queue e executadas logo quando o browser puder, e porque não há nenhuma barreira nem fluxo nessas chamadas então não são retornadas necessariamente na mesma ordem..

cards();
tabela();
graficoMetaPacote();
graficoComparaPacote();

Async/sync

Outra maneira de você ter definido essas chamadas seria criando funções assíncronas, seriam executadas de modo bloqueante, uma após a outra na mesma ordem:

cards().then(tabela).then(graficoMetaPacote).then(graficoComparaPacote).catch(console.log)
// ou outra função async a qual as executa com await
async function preencherDados() {
    await cards()
    await tabela()
    await graficoMetaPacote()
    await graficoComparaPacote()
}
preencherDados().catch(console.log)
1
  • show muito obrigado já resolveu até meus outros problemas anteriores! 10/08/2020 às 12:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .