Atualizar página sem Refresh

HTML

PHP

JSON

09/01/2020

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>";
}


?>
Eldo

Eldo

Curtidas 1

Melhor post

Eldo

Eldo

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.
GOSTEI 1

Mais Respostas

Stella Oliveira

Stella Oliveira

09/01/2020

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
GOSTEI 0
POSTAR