Consulta PHP sem refresh
Olá Pessoal, Estou fazendo um projeto, preciso que minha página não de refresh tenho uma aba de consulta com filtros quando o usuário faz o filtro e aperte o botão consultar aparece os dados em uma table em html, estou utilizando ajax (exemplo: http://wbruno.com.br/ajax/enviar-formulario-para-php-sem-refresh-jquery-ajax/#comment-27773 ) para não dar o refresh, porém não consigo fazer funcionar, todo exemplo que vi tem um exemplo tem uma url: que chama outro arquivo, tentei colocar o consulta em php neste arquivo e não deu certo, tentei chamar a própria pagina na url, porém sem sucesso. Obrigado! Código:
<html> <head> <title>Cadastro de Fornecedor</title> <meta http-equiv="Content-Type" content="text/html. charset=UTF-8"> <link href="../css/cadastro.css" rel="stylesheet" type="text/css" /> <link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/AbasPadrao.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style type="text/css"> label { width:115px. display:block. float:left. font-family: Verdana, Arial, "Times New Roman". font-size:12px}.tabContainer{background-color:#fff. } th,td{background-color:#fff. } table{margin: 0px. } table,th,td{border-collapse: collapse. } th,td{border-bottom: 1px solid #000000. padding: 0px. } th span{display: block. padding: 3px} td span{display: block. padding: 3px} #lista table {width: 888px. } #lista th{color: #FFFFFF. background-color: #000. text-align: left} #lista.tabContainer {width: 890px. border: 1px solid #000000} #lista.scrollContainer {width: 890px. height: 220px. overflow: auto. } #lista.tabela-coluna0{width: 30px. font-size: 12px. } #lista.tabela-coluna1{width: 180px. font-size: 12px. } #lista.tabela-coluna2{width: 80px. font-size: 12px. } #lista.tabela-coluna3{width: 130px. font-size: 12px. } #lista.tabela-coluna4{width: 100px. font-size: 12px. } #lista.tabela-coluna5{width: 70px. font-size: 12px. } #lista.tabela-coluna6{width: 50px. font-size: 12px. } table.bordasimples tr td {border:1px solid #000. } </style> <script language="Javascript"> jQuery(document).ready(function(){ jQuery('#consultar').submit(function(){ var dados = jQuery( this ).serialize(). jQuery.ajax({ type: "POST", url: "?????", data: dados, success: function( data ) { alert( data ). } }). return false. }). }). </script> </head> <body> <?php include ('../conexao.php').?> <div class="cont_tab" id="Consultar"> <form id="consultar" class="form-horizontal" name="consultar" method="post" action="" role="form"> <fieldset class="fieldset"><legend class="legend">Consulta de <b>Fornecedores</b></legend> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="codigo1" class="col-sm-2 control-label" >Código</label> <div class="col-sm-8"> <input type="text" name="codigo1" id="codigo1" style="height:25px. " class="form-control input-sm"/> </div> </div> <div class="form-group"> <label for="ctranportadora" class="col-sm-2 control-label" >Transp.</label> <div class="col-sm-8"> <select name="ctranportadora" id="ctranportadora" style="height:27px. " class="form-control input-sm"> <option></option> <option>Sim</option> </select> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="cfantasia" class="col-sm-2 control-label" >N.Fantas.</label> <div class="col-sm-8"> <input type="text" name="cfantasia" id="cfantasia" style="height:25px. " class="form-control input-sm"/> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="csituacao" class="col-sm-2 control-label" >Situação</label> <div class="col-sm-8"> <select name="csituacao" id="csituacao" style="height:27px. " class="form-control input-sm"> <option></option> <option>Ativo</option> <option>Inativo</option> </select> </div> </div> </div> </div> <br> <button type="submit" style ="width: 135px. " id="consultar" name="consultar" class="btn btn btn-default btn-sm">Consultar</button> <button type="submit" style ="width: 135px. " id="limpar" name="limpar" class="btn btn btn-default btn-sm">Limpar</button> <div class="tabContainer" id="lista"> <table border="0px" class="bordasimples"> <thead> <tr> <th class="tabela-coluna0"><span>Código</span></th> <th class="tabela-coluna1"><span>Nome Fantasia</span></th> <th class="tabela-coluna2"><span>Situação</span></th> <th class="tabela-coluna3"><span>Telefone</span></th> <th class="tabela-coluna4"><span>Email</span></th> <th class="tabela-coluna6"><span>Editar</span></th> </tr> </thead> </table> <div class="scrollContainer"> <table border="0" class="bordasimples"> <tbody> <?php if (isset($_POST['consultar'])) { $idFornecedor = $_POST['codigo1']. $fantasia = $_POST['cfantasia']. $situacao = $_POST['csituacao']. $transportadora = $_POST['ctranportadora']. // teste select condicional $where = Array(). if ($idFornecedor) { $where[] = " `idFornecedor` = '{$idFornecedor}'". } if ($fantasia) { $where[] = " `fantasia` = '{$fantasia}'". } if ($situacao) { $where[] = " `situacao` = '{$situacao}'". } if ($transportadora) { $where[] = " `transportadora` = '{$transportadora}'". } $sql_diagrama = "SELECT * FROM fornecedor ". if (sizeof($where)) $sql_diagrama.= ' WHERE '. implode(' AND ', $where). $consulta_diagrama = mysql_query($sql_diagrama, $conexao) or die(mysql_error("erro aqui")). $linha_diagrama = mysql_fetch_assoc($consulta_diagrama). if ((empty($linha_diagrama['idFornecedor'])) && (!empty($_POST))) { echo "<script >alert('Nenhum Registro Encontrado!!')</script>". //('<script> window.alert ("Nenhum registro encontrado para sua Consulta!") </script> '). } }?> <tr> <td style ="height: 30px. " class="tabela-coluna0"><span><?php echo $linha_diagrama['idFornecedor']?></span></td> <td style ="height: 30px. " class="tabela-coluna1"><span><?php echo $linha_diagrama['fantasia'].?> </span></td> <td style ="height: 30px. " class="tabela-coluna2"><span><?php echo $linha_diagrama['situacao'].?> </span></td> <td style ="height: 30px. " class="tabela-coluna3"><span><?php echo $linha_diagrama['telefone'].?> </span></td> <td style ="height: 30px. " class="tabela-coluna4"><span><?php echo $linha_diagrama['email'].?> </span></td> <td style ="height: 30px. " class="tabela-coluna6"><span><a class="btn btn-warning" style ="width: 50px. " href ="altera-cliente3.php?idFornecedor=<?= $linha_diagrama['idFornecedor']?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td> </tr> </tbody> </table> </div> </div> <br> </fieldset> </form> </div> <script type="text/javascript" src="../js/abas.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="../js/scripts.js"></script> </body> </html>Discussão (9)
Carregando comentários...