0

Olá.

Possuo uma tabela com informações que serão introduzidas no banco de dados, fazendo uma requisição linha a linha.

Exemplo de dados a serem cadastrados

Vamos tomar a imagem como exemplo:

Caso eu queira registrar no banco essas 5 linhas da tabela, preciso apertar o botão que irá cadastrar uma a uma, retornando um resultado de sucesso (verdadeiro) ou falha (falso) para cada linha na tabela.

Depois que a função é finalizada todas as linhas são cadastradas sem nenhum problema,

Caso o retorno seja verdadeiro, a respectiva linha que acaba de ser cadastrada deve receber um estilo de background. E é aqui que eu encontro meu problema.

No caso ai da imagem, todas as 5 linhas da tabela foram incluídas no banco de dados com sucesso. Entretanto apenas a última linha recebe o estilo que deveria ter sido aplicado em todas.

                        $.ajax({
                          url : "includes/bCadastros.php",
                          dataType: 'html',
                          type : 'post',
                          data : post,
                          beforeSend : function(){
                                // Adicionar progress bar
                          }
                        })
                         .done(function(msg){


                            */ A próxima condição (if/else) define o estilo 
                               que a linha da tabela vai ficar e parece 
                               funcionar apenas na última vez em que é 
                               requisitado  */

                             */ A variável *atual* serve como ponteiro para 
                                que se saiba qual linha acaba de ser 
                                registrada e receberá o estilo. Caso eu crie 
                                um alert(atual) nesse nível ele irá mostrar 
                                corretamente o ponteiro pra cada uma das 
                                linhas  */

                            if(msg == 'ok')
                            {

                              */ Mas se caso eu crie o mesmo alert(atual) 
                                 neste nível, nenhum alert será emitido e o 
                                 comportamento será semelhante ao da imagem  
                               */

                                $('#b'+atual).addClass('bCadastrado');
                                $('#b'+atual).removeClass('bFalha');
                            }
                            else
                            {
                                 $('#b'+atual).addClass('bFalha');
                                 $('#b'+atual).removeClass('bCadastrado');
                            }

                            console.log(msg);

                         })
                         .fail(function(jqXHR, textStatus, msg){
                              console.log(msg);
                         }); 

Essa requisição é solicitada para cada linha da tabela, e funciona quando se trata de acessar o arquivo externo e incluir os registros. Porém na hora de aplicar o estilo ela apresenta falha.

Alguém sabe o que pode estar causando isso ?

Função completa

$('#bCadastrarOs').on('click',function(){

     var campo = ['sap','n_os','valor','servico','contrato','tipo','juncao','data'];

        for(i = 0; i < incluidos.length; i++)
        {
            var k = 0;
            var atual = incluidos[i];
            post = '';

            //Função que monta a string com formato de envio que organiza as informações para serem cadastradas
            $('#b'+incluidos[i]).children('td').each(function(i){

                if(i == 0)
                 {
                     post = campo[k]+'='+$(this).html();
                 }
                 else
                 {
                     post = post+'&'+campo[k]+'='+$(this).html();
                 }

                    k++;

            });

            if(post != '')
                {

                    post = post+'&acao=os';

                    $.ajax({
                          url : "includes/bCadastros.php",
                          dataType: 'html',
                          type : 'post',
                          data : post,
                          beforeSend : function(){
                                // Adicionar progress bar
                          }
                        })
                         .done(function(msg){

                            if(msg == 'ok')
                            {
                                $('#b'+atual).addClass('bCadastrado');
                                $('#b'+atual).removeClass('bFalha');
                            }
                            else
                            {
                                 $('#b'+atual).addClass('bFalha');
                                 $('#b'+atual).removeClass('bCadastrado');
                            }

                            console.log(msg);



                         })
                         .fail(function(jqXHR, textStatus, msg){
                              console.log(msg);
                         }); 
                }
        }

  });
6
  • Coloque o resto do código, a função toda.
    – Sam
    Commented 30/11/2019 às 20:48
  • O problema é esse for com um AJAX dentro. Isso não é muito bom.
    – Sam
    Commented 30/11/2019 às 21:14
  • Acredito também que possa ser alguma coisa complicando, mas o objetivo principal que é cadastrar no banco funciona perfeitamente. Por isso estou encucado com esse comportamento rsrs. Claro que existe outras formas de mostrar ao usuário que as linhas foram cadastradas, mas queria usar esse em particular kkk #triste
    – Bsalvo
    Commented 30/11/2019 às 21:21
  • 1
    É porque o for é executado todo de uma só vez, e o AJAX é assíncrono... logo, o valor da variável atual será o da última volta do for.
    – Sam
    Commented 30/11/2019 às 21:43
  • Mas se funcionasse dessa forma, todas as linhas ficariam verdes, menos a última. Não ?
    – Bsalvo
    Commented 30/11/2019 às 23:13

1 Resposta 1

0

Bom, como conversado com os colegas mais experientes, foi percebido que o FOR que englobava a requisição AJAX terminava de cumprir sua função antes de todas as requisições retornarem as informações necessárias para a aplicação de estilo.

Pra contornar a situação retirei a chamada AJAX de dentro do FOR, agora ele apenas prepara a string para ser adicionado ao banco e adiciona a um array chamado requisicoes[]

Logo depois disso, faço a requisição do AJAX e após ele ter tido sucesso, volto a chamar a mesma função de forma recursiva até que todo o array requisicoes[] seja percorrido.

Segue a solução:

function bEnviarOs(requisicoes,vezes,incluidos)
  {

      console.log(requisicoes[vezes]);

      if(vezes >= 0)
      {
                        requisicoes[vezes] = requisicoes[vezes]+'&acao=os';

                        $.ajax({
                          url : "includes/bCadastros.php",
                          dataType: 'html',
                          type : 'post',
                          data : requisicoes[vezes],
                          beforeSend : function(){
                                // Adicionar progress bar
                          },
                          success: function(msg)
                          {
                              if(msg == 'ok')
                            {
                                $('#b'+incluidos[vezes]).addClass('bCadastrado');
                                $('#b'+incluidos[vezes]).removeClass('bFalha');
                            }
                            else
                            {
                                 $('#b'+incluidos[vezes]).addClass('bFalha');
                                 $('#b'+incluidos[vezes]).removeClass('bCadastrado');
                            }


                            bEnviarOs(requisicoes,vezes-1,incluidos);

                           console.log(msg);
                          }
                        })

                         .fail(function(jqXHR, textStatus, msg){
                              console.log(msg);
                         }); 
      }
  }

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 .