Using AJAX return in other functions



  • I have 2 functions: A function1 returns a JSON via AJAX and lists the data in an HTML table dynamically, until it all works. The function2 need to manipulate the same data, however, I did not want to make another request AJAX invoking the function1 again and in view that the data is already on the client side. I am currently using a global variable that stores the AJAX return, so I use it in other functions, but I know that global variable is not a good practice. Is it possible to store AJAX return data in a variable without being global and use it in other functions?

    Function code 1:

    //Variavel com escopo global para guardar os dados da consulta
    //Quando é feito uma requisição AJAX na função listarRegistros
    dadosJson = [];
    paginaAtual = 0;
    

    //Função para listar registros de qualquer tabela via AJAX
    //Passado o NOME da TABELA conforme o que está no bando de dados
    function listarRegistros(tabela, form, input, pagina, nomeModal) {

    var qtde = $("#cbo-qtde-registros").val();
    
    //Abrindo reguisição AJAX e definindo parametros
    $.ajax({
        type: 'POST',
        url: '../file/crud-cad-redes.php?op=lista-all' + '&tabela=' + tabela,
        dataType: 'JSON',
        success: function (dados) {
            if (dados) {
                //Se a consulta retornar os dados é chamado a função para montar a tabela
                dadosJson = dados;//setando variavel global para armazenar os dados de retorno do AJAX
                montaTabela(dados, tabela, pagina, qtde, nomeModal);
                limparInputs();
            } else {
                alert('erro');
            }
        }
    });
    return false;
    

    }

    Function code 2:

    //Função para montar tabela com arrays JSON
    function montaTabela(dados, tabela, pagina, qtde, nomeModal) {
    //Limpa o body da respectiva tabela
    $('#' + tabela + ' > tbody > tr').remove();
    var tbody = $('#' + tabela + ' > tbody');

    //Chamando a função para listar as colunas da tabela e atribuindo o retorno na variavel
    var arrColunas = listaColunasTabela(tabela);
    
    //Loop para montar as linhas com cada registro do array JSON da consulta - sistema de paginação
    for (var i = pagina * qtde; i < dados.length && i < (pagina + 1) * qtde; i++) {
        tbody.append(
                //Em cada iteração é chamado a função para montar as colunas da linha
                '<tr>' + montaColunas(dados[i], arrColunas, nomeModal) + '</tr>'
                );
    }
    
    //Setando valor do input text da navegação da paginação e ajustando os botoes da paginação
    $('#txt-navegacao').val(('Página ' + (pagina + 1) + ' de ' + Math.ceil(dados.length / qtde)));
    ajustarBotoes(pagina, qtde, dados);
    

    }

    //Função para montar as colunas e seus atributos de cada linha da tabela
    function montaColunas(dados, arrColunas, nomeModal) {

    //Recuperando o primeiro elemento do array JSON para saber a
    //A qtde de colunas (cabeçalho da tabela enviado pela consulta SLQ) e
    //Recuperar as keys do elemento (nomes dos cabeçalhos de cada registro)
    var elemento = Object.keys(dados);
    var colunas = '';
    
    //Loop para montar as colunas - Neste caso do ultimo para o primeiro registro do array JSON
    for (var j = elemento.length - 1; j >= 0; j--) {
    
        //Loop para iterar o array de colunas da tabela HTML
        for (var k = 0; k < arrColunas.length; k++) {
    
            //Verifica se nome da classe do array de colunas da tabela HTML é
            //igual ao nome da key do elemento do array JSON da consulta
            //Se for igual a coluna é exibida na tabela, caso contrario e desconsiderada
            if (arrColunas[k] == elemento[j]) {
    
                //Na posição 0 do loop é chamado a função para montar os dados da respectiva coluna
                if (j == 0) {
                    colunas += montaDadosColuna(dados, elemento, nomeModal) + '</td>';
    
                    //Nas demais posições é adicionado as colunas HTML e os seus valores normalmente
                } else {
                    colunas += '<td>' + dados[elemento[j]] + '</td>';
                }
            }
        }
    }
    
    //Retornando o resultado para a função MontaTabela
    return colunas;
    

    }

    //Função para montar a coluna com os dados para selecionar posteriormente
    function montaDadosColuna(dados, elemento, nomeModal) {
    var coluna = '<td';

    //Loop para inserir os DATAs no respectiva TD da tabela
    for (var i = elemento.length - 1; i &gt;= 0; i--) {
    
        //É adicionado o DATA + a key do elemento do array JSON
        coluna += ' data-' + elemento[i] + '="' + dados[elemento[i]] + '"';
    }
    
    //Fechando a tag TD é adicionado um icone com a classe para selecionar o registro na tabela posteriormente
    //Os DATAs são utilizado no momento do click deste icone para preencher o formulario
    coluna += '&gt;&lt;img src="../img/btn_modal_05.png" height="20px" style="cursor:pointer" class="btn-seleciona" title="Clique aqui para editar o registro" data-modal="' + nomeModal + '"' + '&gt;';
    return coluna;
    

    }

    //Função para listar e armazenar em array os nomes das classes das colunas da respectiva tabela
    //A função recupera as classes que estão nas tags 'th' da respectiva tabela
    function listaColunasTabela(tabela) {
    var arrColunas = [];

    //Iteração na tag 'th' para empilhar os nomes das classes
    $('#' + tabela + ' &gt; thead th').each(function () {
        arrColunas.push($(this).attr('class'));
    });
    
    //Retornando o array com as classes das colunas
    return arrColunas;
    

    }

    //Função move para ultima pagina da paginação
    function moveLast(nomeModal) {
    paginaAtual = Math.floor(dadosJson.length / $("#cbo-qtde-registros").val());
    montaTabela(dadosJson, nomeTabela, paginaAtual, $("#cbo-qtde-registros").val(), nomeModal);
    }

    //Função move para próxima pagina da paginação
    function moveNext(nomeModal) {
    if (paginaAtual < dadosJson.length / $("#cbo-qtde-registros").val() - 1) {
    paginaAtual++;
    montaTabela(dadosJson, nomeTabela, paginaAtual, $("#cbo-qtde-registros").val(), nomeModal);
    }
    }

    //Função move para pagina anterior da paginação
    function movePrevious(nomeModal) {
    if (paginaAtual > 0) {
    paginaAtual--;
    montaTabela(dadosJson, nomeTabela, paginaAtual, $("#cbo-qtde-registros").val(), nomeModal);
    }
    }

    //Função move para primeira página da paginação
    function moveFirst(nomeModal) {
    paginaAtual = 0;
    montaTabela(dadosJson, nomeTabela, paginaAtual, $("#cbo-qtde-registros").val(), nomeModal);
    }

    //Função para habilitar ou desabilitar os botoes de navegação da paginação
    function ajustarBotoes(pagina, qtde, dados) {
    $('#btn-next').prop('disabled', dados.length <= qtde || pagina >= dados.length / qtde - 1);
    $('#btn-previous').prop('disabled', dados.length <= qtde || pagina == 0);
    $('#btn-last').prop('disabled', dados.length <= qtde || pagina >= dados.length / qtde - 1);
    $('#btn-first').prop('disabled', dados.length <= qtde || pagina == 0);
    }



  • Global variables should be avoided as referred. Because they can be collided with other global names, and because they can be manipulated by alien code.

    But we often need accessible variables in different places where it is not possible to have a data flow between pure functions. In such cases the solution can be to make a class, or to create a closed scope.

    In your case creating a closed scope solves the problem with fewer changes.

    Just put one https://pt.stackoverflow.com/a/23788/129 around the code you already have, and declare the variable inside. And you must declare with https://pt.stackoverflow.com/q/206117/129 and not only nomeDaVariavel = [].

    The code would look like this:

    (function(){
        var dadosJson = [];
        var paginaAtual = 0;
    
    // o resto do código aqui dentro
    

    })();




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2