2

Dentro do meu sistema, ao usuário se logar, algumas informações buscadas no meu banco são mostradas, segue função que busca os dados e como eles são listados:

Função

# função que busca os dados de originação no banco
function listaDadosOriginacao($conexao){
    $dados = array(); //pode ser [] também, mas por compatibilidade, array()

    $rede    = $_SESSION['redeSelecionada'];
    $codLoja = $_SESSION['lojaSelecionada'];
    $mes     = $_SESSION['mesSelecionado'];

    $resultado = mysqli_query($conexao, "SELECT * FROM evolucao_originacao WHERE codLoja = {$codLoja} AND rede = '{$rede}' AND mesReferencia = '{$mes}'");
    while($valores = mysqli_fetch_assoc($resultado)){
        array_push($dados, $valores);
    }
    return $dados;
};

Listagem (um único exemplo pois todos os dados pertencem ao mesmo array)

<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
    <a class="dashboard-stat dashboard-stat-v2 green" href="#">
        <div class="visual">
            <i class="fa fa-shopping-cart"></i>
        </div>
        <div class="details">
            <div class="number"><span data-counter="counterup" data-value="<?=number_format($dadosOriginacao['propostasAprovadas'],0,',','.')?>">0</span></div>
            <div class="desc"># Aprovadas</div>
        </div>
    </a>
</div>

Eu tenho dois dropdowns que filtram dados e ao clicar em um botão, ele vai ao banco por meio de uma requisição AJAX e busca todos os dados na mesma tabela que eu utilizo para introduzir informações ao usuário e filtra utilizando os valores selecionados no dropdown.

Segue o que eu já tenho da requisição AJAX:

$("#botao-filtrar").click(function(){
$(".mask-loading").fadeToggle(1000);
    $.ajax({
        url: 'datacenter/functions/filtraDashboardGeral.php',
        async: true,
        type: 'POST',
        dataType: 'JSON',
        data: {rede: $("#dropdown-parceria").val(), codLoja: $("#dropdown-loja").val(), mes: $("#dropdown-mes").val()},
        success: function(data){

        }
    });
});

E este é o documento citado filtraDashboardGeral.php

<?php
    session_start();
    require_once('../../includes/gestaoOriginacao.php');

    $rede = $_POST['rede'];
    $codLoja = $_POST['codLoja'];
    $mes = $_POST['mes'];

    $dados = array();

    $resultado = mysqli_query($conexao, "SELECT * FROM evolucao_originacao WHERE redeTratada = '{$rede}' and codLoja = {$codLoja} and mesReferencia = '{$mes}'");

    while($valores = mysqli_fetch_assoc($resultado)){
        array_push($dados, $valores);
    }

O que eu estou tentando fazer é, que o ajax me retorne os dados e preencha os valores novos nas variáveis que eu já estou utilizando para listagem sem que eu precise recarregar a minha página!

Sei que é um tanto quanto complexo e estou há semanas quebrando a cabeça com isso e nada funciona. Sou iniciante nessa área de requisições assíncronas.

Alguma solução ou sugestão de melhora?

2 Respostas 2

1

Exemplo de um código ajax:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function()
    {
        $('#btn1').click(function()
        {


            $.ajax({
              type: 'POST',
              url: 'test.php',
              data: {

                  variavel1: 'algumvalor',
                  variavel2: 'outrovalor',
              },
              success: function(data) 
              {
                // $('body').append(data);
                // alert(data);

                $('#minhalista').append(data);


              }
            });
        });

    });

    </script>
</head>
<body>
    <button id="btn1">
        Carregar mais elementos na lista via ajax
    </button>

    <b>Lista de Chamados<b>
    <ul id="minhalista">
        <li><a href="minhaurl.php?id=123">Elemento que já estava previamente carregado [Prioridade: Baixa]</a></li>
    </ul>


</body>
<html>

Página test.php que faz o processamento:

<?php

/*
 Faz algum processamento com as variáveis variavel1 e variavel2 que foram enviadas e recebe a lista abaixo
*/

// MOCKUP : Exemplo fake para ver algo funcionando
$mockuparr = array( 
                0 => array(
                            "id"             => 45,
                            "assunto"        => "Bug na listagem XPTO",
                            "prioridade"     => "Urgente"
                    ),
                1 => array(
                            "id"             => 46,
                            "assunto"        => "Mudar cor do menu para azul",
                            "prioridade"     => "Baixa"
                    ),    
                2 => array(
                            "id"             => 47,
                            "assunto"        => "Recarregar massa de testes",
                            "prioridade"     => "Média"
                    ),    
                3 => array(
                            "id"             => 48,
                            "assunto"        => "Excluir registros repetidos da tabela produtos",
                            "prioridade"     => "Alta"
                    ),        
                4 => array(
                            "id"             => 49,
                            "assunto"        => "Atualizar módulo CR45 em produção",
                            "prioridade"     => "Alta"
                    ),                            
            );


$output='';

foreach($mockuparr as $item)
{
    $output.='<li><a href="minhaurl.php?id='.$item["id"].'">'.$item["assunto"].' [Prioridade '.$item["prioridade"].']</li>';
}

echo $output;
1
  • Funcionou!! Muito obrigado pela atenção e paciência haha! Abraço 9/12/2016 às 18:54
1

Quando respondo uma pergunta costumo copiar código, colar aqui no meu servidor e rodar para debugar, mas este é o tipo de questão que não consigo fazer isso pois necessita de tabelas criadas e etc. Então o que dá para fazer é tentar te orientar meio as cegas mesmo.

Parece que você já está enviando os dados da maneira certa para o lado servidor. Agora falta pegar a resposta e trabalha-lá para fazer com que você consiga realizar o que deseja.

Se o seu intuito é pegar os dados do servidor e trabalhar a resposta com javascript, sugiro o seguinte:

Em filtraDashboardGeral.php acrescentar no fim de tudo, depois do fechamento do seu while:

echo json_encode($dados);

E depois no ajax na sua função success vc trata a variável data recebida como um array de javascript e utiliza jquery para incluir as variáveis na parte do html que quiser.

    success: function(data)
    {
        // Aqui vc usa funções de javascript ou jquery para incluir
        // elementos do array data em partes do seu código html
        // sendo que data vai ser um array de linhas da sua 
        // tabela evolucao_originacao 

    }

Boa sorte aí meu camarada. Se o que eu escrevi te ajudar minimamente em algo, dê uma moral e clique na setinha pra cima para me dar pontos de reputação. Valew, falows. :)

4
  • 1
    muito obrigado, eu consegui receber os dados, no success eu coloquei um console.log e veio um array com meus dados filtrados do jeito que eu preciso, mas não tenho ideia de como fazer a parte da inclusão dos dados no meu html com jquery. Poderia me ajudar? (já dei um moral clicando na setinha) 8/12/2016 às 19:14
  • Obrigado pela moral! :) Estou de saída agora, mas vou te deixar uma orientação do que vc vai precisar: A) Localizar os elementos no DOM da página usando $("#minhaid") , $(".minhaclasse") ou mecanismos semelhantes e depois, B) utilizar uma mudança do valor do elemento ou do texto interno do elemento ou adicionar elementos dinamicamente. Dê uma olhada em: w3schools.com/jquery/jquery_dom_add.asp e learn.jquery.com/using-jquery-core/manipulating-elements 8/12/2016 às 19:21
  • Mas eu coloco a chamada do elemento DOM juntamente com append, after, etc dentro do success? 9/12/2016 às 17:20
  • Pode ser ali mesmo no sucess ou chamar outra função pra fazer isso. Uma coisa que gosto de fazer que me auxilia é enviar html direto já formato porque acho montar tudo com javascript mais trabalhoso. Vou colar em outra resposta um exemplo usando envio em html ao invés de json. 9/12/2016 às 18:40

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 .