I have the following listing:
WhenIupdatependingstatusforpayments:
IwouldlikethevaluesoftheTopPendingandPendingPanelstobeupdatedautomatically,butonlywhenIrefreshthepage:
I'mtryingthisway:
HTML
<divclass="col-lg-6 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="font-family: Arial; font-size: 30px">
<i class="fas fa-dollar-sign fa-2x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge statusPagos" style="font-family: Arial; font-size: 30px">
<?php echo $metodos->visualizarPagamentos($status = 'P'); ?>
</div>
<div style="height: 14px"></div>
<div>Pagos</div>
</div>
</div>
</div>
<a href="<?php echo $caminhoAbsoluto; ?>/sistema/financeiro/?pagos">
<div class="panel-footer" onclick="window.location.href='<?php echo $caminhoAbsoluto; ?>/sistema/ver-pagos/';" title="Ver pagamentos confirmados">
<span class="pull-left">Visualizar</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="font-family: Arial; font-size: 30px">
<i class="fas fa-dollar-sign fa-2x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge statusAberto" style="font-family: Arial; font-size: 30px">
<?php
echo $metodos->visualizarPagamentos($status = 'A');
?>
</div>
<div style="height: 14px"></div>
<div>Pendentes</div>
</div>
</div>
</div>
<a href="<?php echo $caminhoAbsoluto; ?>/sistema/financeiro/?pendentes">
<div class="panel-footer" onclick="window.location.href='<?php echo $caminhoAbsoluto; ?>/sistema/ver-pendentes/';" title="Ver pagamentos pendentes">
<span class="pull-left">Visualizar</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
JQuery
<script>
$(document).on('click',"#btnAlterar", function(){
var t;
function temporiza(status){
t = setTimeout(function(){
$('.statusAberto').html('<?php echo $metodos->visualizarPagamentos('A'); ?>');
$('.statusPagos').html('<?php echo $metodos->visualizarPagamentos('P'); ?>');
},1000);
}
var that = this;
var IdFinanceiro = $(this).attr('data-id'); // pega o id do botão
$.post('sistema/alterar-status.php', {key: IdFinanceiro}, function(retorno){
if(retorno == 1){
$(that).parent('.status').html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-success btn-xs'>Pago</a>");
if (!t) temporiza();
}if(retorno == 0){
$(that).parent('.status').html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-danger btn-xs'>Pendente</a>");
if (!t) temporiza();
}
});
});
</script>
PHP
/**
* Método atualiza os valores dos pagamentos
* Encontra-se na página financeiro.php
* @access public
* @param string $status
* @return string $visualizar
*/
public function visualizarPagamentos($status){
$sql = mysqli_query($this->conexao,"SELECT *, SUM(ValorTotal) AS ValorTotalPagto FROM cs_financeiro WHERE StatusPagamento = '".mysqli_real_escape_string($this->conexao,$status)."';");
$csVisualizar = mysqli_fetch_object($sql);
$pagamentos = ($csVisualizar->ValorTotalPagto == "")?"R$ 0,00":"R$ ".number_format($csVisualizar->ValorTotalPagto,2,',','.');
return $pagamentos;
}
Updating and changing status is working normally in the listing, but the problem is only in the top Panel's, which do not automatically update the values.