Atualizar página sem Refresh
09/01/2020
0
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>";
}
?>
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
Curtir tópico
+ 1
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.
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.
Eldo
Responder
Mais Posts
14/03/2020
Stella Oliveira
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
É a única entrada no front que está modificando seu estado. Tenta comentar essas linhas e me diz o que acontece
$.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
Clique aqui para fazer login e interagir na Comunidade :)