AJAX return JSON size

Question

I’m having doubts about using AJAX, I’m doing a function to assemble a list according to some filters.

Everything is working perfectly, I return the JSON and mount the table. The problem is when my return contains many data.

It seems that I haven’t received the entire data package and AJAX is already entering Success:

So the table is mounted in half.

I have tried using callbacks, . done()... Nothing solved this problem of mine.

Just follow my code...

$.ajax({
        url: 'php/ficha_cadastral_function.php',
        data:{ action: 'pesquisaCliente'
             , cnpj: cnpj
             , razaoSocial: razaoSocial
             , telefone: telefone
             , nomeFantasia: nomeFantasia
             , email: email
             , representante: representante
             , iniScore: iniScore
             , fimScore: fimScore
             , situacao: situacao },
        dataType: 'JSON',
        type: 'POST',
        async: false,
        success: function(DATA){
            if(DATA.STATUS == 200){
                tabela += ' <form method="post" action="ficha_cliente.php"> ';
                tabela += ' <hr/> ' +
                              ' <div class="col-xs-12" id="lista_cliente"> ' +
                                  ' <table class="table table-bordered small" > ' +
                                      ' <thead> ' +
                                          ' <tr> ' +
                                              ' <th class="text-center">CNPJ</th> ' +
                                              ' <th class="text-center">Razão Social</th> ' +
                                              ' <th class="text-center">Nome Fantasia</th> ' +
                                              ' <th class="text-center">Telefone</th> ' +
                                              ' <th class="text-center">E-mail</th> ' +
                                              ' <th class="text-center">Representante</th> ' +
                                              ' <th class="text-center">Score</th> ' +
                                              ' <th class="text-center">Situação</th> ' +
                                              ' <th class="text-center">Ação</th> ' +
                                          ' </tr> ' +
                                      ' </thead> '  +
                                      ' <tbody id="trListaCliente"> ' ;

                for($i=0; $i < DATA.LINHAS; $i++){
                    tabela  += '<tr>' + 
                                  '<td class="text-center" id="tdCNPJ">' + DATA.DADOS[$i].CNPJ_TITULO + '</td>' + 
                                  '<td class="text-center" id="tdRazaoSocial">' + DATA.DADOS[$i].RAZAO_SOCIAL + '</td>' + 
                                  '<td class="text-center" id="tdNomeFantasia">' + DATA.DADOS[$i].NOME_FANTASIA + '</td>' + 
                                  '<td class="text-center" id="tdTelefone">' + DATA.DADOS[$i].TELEFONE + '</td>' + 
                                  '<td class="text-center" id="tdEmail">' + DATA.DADOS[$i].EMAIL + '</td>' + 
                                  '<td class="text-center" id="tdRepresentante">' + DATA.DADOS[$i].REPRESENTANTE + '</td>' + 
                                  '<td class="text-center" id="tdScore">' + DATA.DADOS[$i].SCORE + '</td>' + 
                                  '<td class="text-center" id="tdSituacao">' + DATA.DADOS[$i].DESC_SITUACAO + '</td>' + 
                                  '<td class="text-center" id="tdAcao">' ;
                                  if(DATA.DADOS[$i].CADASTRADO == false) {
                                      tabela += '<button type="submit" class="btn btn-primary btn-xs" name="btValor" value="'+DATA.DADOS[$i].CNPJ+'"><span class="glyphicon glyphicon-search"></span></button>';
                                  } else {
                                      tabela += '<button type="submit" class="btn btn-success btn-xs" name="btValor" value="'+DATA.DADOS[$i].CNPJ+'"><span class="glyphicon glyphicon-search"></span></button>';
                                  }

                                  '</td>' + 
                               '</tr>';
                }

                tabela +=         ' </tbody> ' +
                              ' </table> ' +
                          ' </div> ';

                tabela += ' </form> ';

                $('#listaCliente').html(tabela);

            } else {

                tabela += ' <hr/> ' + 
                          ' <div class="row"> ' +
                              ' <div class="col-md-12 text-center"> ' +
                                  ' <h3>Sem dados cadastrados!</h3> ' +
                              ' </div> ' +
                          ' </div> ';

                $('#listaCliente').html(tabela);
            }
        },
        error: function(DATA) {
            alerta('Ocorreu um erro ao carregar o cliente! (ERRO - fncPesquisaCliente)', 'danger');
            limpaLista();
        }
    });

Someone would have a suggestion as to how to resolve this?

Answer 1

I do not believe that you have not received the whole package once a reply request leaves the backend server, ajax only returns 200 status when all the header and content is returned to the browser. What happens to your code is that some of the variables coming from json must contain an invalid quote value or character that is breaking the concatenation of its table variable.

How can you solve :

First take the real evidence! Remove all DATA variables[$i] from your html within your routine, run the code, if it works, enter one by one. Until you find out which one has an invalid character, responsible for breaking the syntax of your javascript. Then in possession of this information just better validate the output in the backend correctly.

<tr>' + 
'<td class="text-center" id="tdCNPJ">'DATA.DADOS[$i].CNPJ_TITULO + '</td>' + 
'<td class="text-center" id="tdRazaoSocial"></td>' + 
'<td class="text-center" id="tdNomeFantasia"></td>' + 
'<td class="text-center" id="tdTelefone">''</td>' + 
'<td class="text-center" id="tdEmail"></td>' + 
'<td class="text-center" id="tdRepresentante"></td>' + 
'<td class="text-center" id="tdScore"></td>' + 
'<td class="text-center" id="tdSituacao"></td>' + 
'<td class="text-center" id="tdAcao">' ;

I hope that information will be useful