Pass PHP variable to another page using Ajax, and update value of an element

Question

I have the following code gerar-relatorio-extrato.php:

    try {
        $pdo = abrirConexao();
        // Selecionar extrato
        $consultaExtrato = $pdo->prepare($sql);
        $consultaExtrato->execute($insertData);
        $listarExtrato   = $consultaExtrato->fetchAll(PDO::FETCH_OBJ);
        foreach ($listarExtrato as $listar) {
            $lancamento      = $listar->lancamento;
            $tipo            = $listar->tipo;
            $data_vencimento = $listar->data_vencimento;
            $tipo_movimento  = $listar->tipo_movimento;
            $realizado       = $listar->realizado;
            $data_realizado  = $listar->data_realizado;
            $numero_parcela  = $listar->numero_parcela;
            $parcelas        = $listar->parcelas;
            $valor           = $listar->valor;
            $observacoes     = $listar->observacoes;

            $valor_formatado = str_replace(".","",$valor); // Remover "." do valor
            $valor_formatado = (float) str_replace(",",".",$valor_formatado); // Substituir vírgula por "."
            ($lancamento == "Receita")? $total_receita = $total_receita + $valor_formatado : $total_despesa = $total_despesa + $valor_formatado;
?>
                                <tr>
                                    <td class="col-sm-1"><?php echo $lancamento;?></td>
                                    <td class="col-sm-1"><?php echo $tipo;?></td>
                                    <td class="col-sm-2"><?php echo $data_vencimento;?></td>
                                    <td class="col-sm-1"><?php echo $tipo_movimento;?></td>
                                    <td class="col-sm-1"><?php echo ($realizado == 1)? "Sim" : "Não";// 0 para Não e 1 para Sim?></td>
                                    <td class="col-sm-2"><?php echo ($realizado == 1)? $data_realizado : "";?></td>
                                    <td class="col-sm-1"><?php echo $numero_parcela." / ".$parcelas;?></td>
                                    <td class="col-sm-1"><?php echo ($lancamento == "Receita")? "<b>".$valor."</b>" : "<b class='text-danger'>".$valor."</b>";?></td>
                                    <td class="col-sm-2 observacoes hide"><?php echo $observacoes;?></td>
                                </tr>
<?php
        }
        // Fechar conexão
        $pdo = null;
    } catch(PDOException $e) {
       echo "<div class='alert alert-danger'>".$e->getMessage()."</div>";
    }

I want to take the value of the variable $total_receita and $total_despesa and dps update in the elements:

<div class="col-lg-4">
    <h4>Total de Receitas: </h4>
</div>
<div class="col-lg-4">
    <h4>Total de Despesas: </h4>
</div>

That are on another page extrato.php. I am using Ajax (jQuery) to update the report:

function gerar_relatorio_extrato() {
           var form = $("#filtrar_extrato");
           var parametros = $(form).serialize();
           $.ajax({
              type: "GET",
              url: "ajax/gerar-relatorio-extrato.php",
              data: parametros,
              beforeSend: function(objeto){
                  $("#tabelaExtrato tbody").html("Carregando...");
              },
              success: function(dados){
                  $("#tabelaExtrato tbody").html(dados);
              },
              error: function(jqXhr, textStatus, errorThrown){
                  console.log(errorThrown);
              }
           });
}

Answer 1

If the function gerar_reportario_extract() is being called inside the extract.php can do the following: - put a span or div with id - where the value will be placed with innerHTML:

  <div class="col-lg-4">
        <h4>Total de Receitas: <span id="totalreceitas"></span></h4>
    </div>
    <div class="col-lg-4">
        <h4>Total de Despesas: <span id="totaldespesas"></span></h4>
    </div>

-put Hidden on gerar-relatorio-extrato.php with totals:

<input name="total_receita" id="total_receita" type="hidden" value="<?php echo $total_receita; ?>" />
<input name="total_despesa" id="total_despesa" type="hidden" value="<?php echo $total_despesa; ?>" />

• and in function gerar_relatorio_extrato put the code to pass Hidden value to span in Success - after loading the data:

   success: function(dados){
        $("#tabelaExtrato tbody").html(dados);
        document.getElementById('totalreceitas').innerHTML = document.getElementById('total_receita').value;
        document.getElementById('totaldespesas').innerHTML = document.getElementById('total_despesa').value;
    }