0
I have the following listing:
When I upgrade from pending to paid status:
I would like the values of the upper Paid and Pending Panels to be updated automatically, but only when I update the page:
I’m trying this way:
HTML
<div class="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;
}
The update and status change is working normally in the listing, but the problem is only in the upper Panel’s, which do not automatically update the values.
It would basically change the color of the div and the text "paid" and "pending", that’s not it?
– Sam
Hello Sam. Actually it would be the values that are within the div’s. Includes in my post the method
visualizarPagamentos()PHP. It only brings up-to-date values.– user24136
I thought the value wouldn’t change, just the status.
– Sam
You will need to create another asynchronous connection, generate these values using the method you created
visualizarPagamentos()and update the respective Ivs. There is no other way.– Andrei Coelho
Hello Andrei. Forgive me, I couldn’t understand. Would this asynchronous connection be in Jquery? If so, could you show me an example? 'Cause Jquery’s not really my strong suit.
– user24136
Yes... I’ll make an example.
– Andrei Coelho
There’s actually another way to do it, which would be by taking the values from the list at the time of the click and updating the div. That would be better than my ayual response, but then you would need to put the rest of the html code.
– Andrei Coelho
Got it? Something calls here!
– Andrei Coelho
Ball show Andrei. I will test tonight and give you a return, combined?
– user24136
Relax! Just use "@" to call me if I’m not notified. Type: @Andreicoelho
– Andrei Coelho