Atualizar página sem Refresh

09/01/2020

30

Olá Pessoal,

Criei uma consulta de pagamentos no período, solicitando um período inicial e final, clico em consultar, e os dados são retornados em forma de tabela para a tela, até ai tudo bem, porem em alguns segundo ela retorna com os valores inicial da minha consulta.

Não consegui identificar o faz disparar a consulta novamente. Alguém tem ideia do que possa ser ?

Segue o código html e php :



<?php
include('menu.html');

include('conexao\conexao.php');

?>

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>


<body>
<br>

<div class="container">

<h3><i class="fas fa-bars"></i> Pagamentos do Período </h3>

<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<form method="POST" class="form-inline" id="formpesquisa" enctype="multipart/form-data" name ="form-pesquisa" >

<!-- labels -->
<div class="row">
<div class='col-md-2'>
<div class="form-group">
<label class="col-md-2 control-label" for="dt1">Inicial</label>
</div>
</div>

<div class='col-md-2'>
<div class="form-group">
<label class="col-md-2 control-label" for="dt2">Final</label>
</div>
</div>
</div>

<!-- Campos e botao -->
<div class="row">

<div class='col-md-2'>
<div class="form-group">
<div class="input-group date">
<input type="text" class="form-control datepicker" data-date-format="dd/mm/yyyy"
name ="dt1" id="dt1" placeholder="dd/mm/yyyy" value ="01/01/2019">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

<div class='col-md-2'>
<div class="form-group">
<div class="input-group date">
<input type="text" class="form-control datepicker" data-date-format="dd/mm/yyyy"
name ="dt2" id="dt2" placeholder="dd/mm/yyyy" value ="31/12/2019" >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

<button class="btn btn-primary my-2 my-sm-0" id ="btnpesquisa" onclick ="consultapagto();" >Pesquisar</button>

</div> <!-- div row -->
</form>

</div> <!-- Painel body -->
</div> <!--panel -->
</div> <!-- row -->
</div> <!-- div container -->



<div class="container" id ="resultado">

</div>

<script type="text/javascript" language="javascript">

$('.input-group.date').datepicker({format: "dd/mm/yyyy"});

function consultapagto() {
//definir evento "onclick" do elemento (botao) ID butEnviar

//capturar o valor dos campos do fomulario
var dt1 = $("input[name=dt1]").val();
var dt2 = $("input[name=dt2]").val();


//usar o metodo ajax da biblioteca jquery para postar os dados em processar.php
$.ajax({
"type": "POST",
"url": "busca.php",
"dataType": "html",
"data": {
"dt1" : dt1,
"dt2" : dt2
},
"success": function(response) {
//em caso de sucesso, a div ID=saida recebe o response do post
document.getElementById("resultado").innerHTML =response;
//$("div#resultado").html(response);
}
});

};
</script>
</body>

</html>


>>>>>>>> PHP

<?php
//Incluir a conexão com banco de dados
include_once('conexao\conexao.php');

if(!isset($_SESSION)) {
session_start();
}
// ler datas
$dtinia =strtr($_REQUEST['dt1'], '/', '-');
$dtfima =strtr($_REQUEST['dt2'], '/', '-');
// formato do banco de dados
$dtini = date("Y-m-d", strtotime($dtinia));
$dtfim = date("Y-m-d", strtotime($dtfima));

// cabeçalho json
header('Content-Type: application/json; charset=utf-8');

//Pesquisar no banco de dados nome do curso referente a palavra digitada pelo usuário
$sql = "SELECT * FROM fin_titulo WHERE DT_VENCTO between '$dtini' and '$dtfim' ";
$reg = mysqli_query($conn, $sql);
// echo $sql;
if(mysqli_num_rows($reg) <= 0){
echo "Nenhum pagamento encontrado...";
}else{

echo "<table class="table table-striped table-bordered" id="minhatabela" style="width:100%" >\r\n";
echo " <thead>\r\n";
echo " <tr>\r\n";
echo " <td>Id</td> \r\n";
echo " <td>Título</td> \r\n";
echo " <td>Emissão</td> \r\n";
echo " <td>Vencimento</td> \r\n";
echo " <td>Valor</td> \r\n";
echo " <td>Saldo</td> \r\n";
echo " </tr>\r\n";
echo " </thead>\r\n";

while($rows = mysqli_fetch_assoc($reg)){

echo "<tr>\r\n";
echo "<td>".$rows['ID']."</td>\r\n";
echo "<td>".$rows['TITULO']."</td>\r\n";
echo "<td>".$rows['DT_EMISSAO']."</td>\r\n";
echo "<td>".$rows['DT_VENCTO']."</td>\r\n";
echo "<td>".$rows['VALOR']."</td>\r\n";
echo "<td>".$rows['SALDO']."</td>\r\n";
echo "</tr>\r\n";

}

echo "</table>";
}


?>
Responder

Post mais votado

16/03/2020

Olá,

Obrigado por comentar, mas no caso acabei descobrindo que o form method="POST" disparava o evento, juntamente com o "btnpesquisa" onclick ="consultapagto();" . Ou seja os dois eventos eram disparados. A solução foi remover o form, deixando somente o resultado da function.
Responder

Mais Posts

Eu não vejo nada que poderia causar esse problema no seu código, já que PHP só recarregaria quando atualiza. Porém, eu tenho uma suspeita que esse script aqui está fazendo isso

$.ajax({
  "type": "POST",
  "url": "busca.php", 
  "dataType": "html",
  "data": {
    "dt1" : dt1,
    "dt2" : dt2
  },
"success": function(response) {
  //em caso de sucesso, a div ID=saida recebe o response do post
  document.getElementById("resultado").innerHTML =response;
  //$("div#resultado").html(response);
  }
});


É a única entrada no front que está modificando seu estado. Tenta comentar essas linhas e me diz o que acontece
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar