Publicado em 28 de ago.

Efeito Mostar/Ocultar div com dados do Banco

Boa noite amigos...gostaria se possivel, você's me ajudassem em um pequeno problema por aqui, pois...esse é o meu primeiro teste com JQuery, e estou mais rodado do que o Brasil nas Olimpiadas...

Tenho uma pequena página que faz uma busca de usuarios on-line em um site, tenho um link que mostra uma lista dos usuarios ao ser clicado, porém, gostaria de esconder essa mesma lista ao clicar num link ocultar.

Detalhe: como já devem ter percebido, o link de mostrar e ocultar, deve ser substituído um pelo outro no evento do click.

Bom...a parte da busca, mostrando a lista está tudo ok, agora....só não sei como fazer para ocultar.

Alguem pode me ajudar?

Segue abaixo os arquivos que estou trabalhando....

SQL

CREATE TABLE `usuarios` (
 `id_usuario` int(11) NOT NULL AUTO_INCREMENT,
 `usu_login` varchar(50) DEFAULT NULL,
 `usu_senha` varchar(100) DEFAULT NULL,
 PRIMARY KEY (`id_usuario`),
 UNIQUE KEY `id_usuario` (`id_usuario`)
) ENGINE=InnoDB;

form.php

<html>
<head>
<title>Busca simples com jQuery, Ajax e PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

 $(document).ready(function(){
 $("a").click(function(){
 //var nomeProduto = $("#nomeProduto").val();

 $.ajax({

 url: "busca.php",
 dataType: 'html',
 // data: {produto:nomeProduto},
 type: "POST",

 beforeSend: function () {
 $('#carregando').show();
 },
 success: function(data){
 $('#carregando').hide();
 $("#resBusca").html('<b>Usuários On-line</b><br /><br/>'+ data );

 },
 error: function(data){
 $('#carregando').html(data);
 }

 });

 });
 });

</script>
<style>
.fundo {
background-color: #eeeeee;
padding:0;
margin:0 auto;
font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
font-size:11px;
}
</style>
</head>

<body>

<a href="#">Mostrar</a>

<br />
<div id="carregando" style="display:none;"><img src="carregandoAjax.gif" /></div>

<div id="resBusca" class="fundo"></div>

</body>
</html>

busca.php

<?php

//$busca = $_POST['produto'];

//Verifica se variavel busca esta vazia

/*if($busca == ""){
	echo "Digite algum item";
	exit;

}*/

//Aqui faz conexão com banco localmente

$conexao = mysql_connect('localhost', 'root', 'root') or die ("Erro na conexão ao banco de dados.");
mysql_select_db('antonio',$conexao) or die ("Erro ao selecionar a base de dados.");

//Select para fazer a busca
$sql = mysql_query("SELECT * FROM usuarios") or die ("Não foi possível realizar a consulta.");
$total_rows = mysql_num_rows($sql);

//Aqui verifica se veio algum resultado

 if($total_rows == 0){

	echo "Nenhum resultado encontrado";
 }
 else{

	//Loop com resultado do select
	while ($result = mysql_fetch_array($sql)) {

 echo $result['usu_login']."<br />";

	}
 }
?>

Desde já, grato pela atenção...

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

CREATE TABLE `usuarios` ( `id_usuario` int(11) NOT NULL AUTO_INCREMENT, `usu_login` varchar(50) DEFAULT NULL, `usu_senha` varchar(100) DEFAULT NULL, PRIMARY KEY (`id_usuario`), UNIQUE KEY `id_usuario` (`id_usuario`) ) ENGINE=InnoDB;

<html> <head> <title>Busca simples com jQuery, Ajax e PHP</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ //var nomeProduto = $("#nomeProduto").val(); $.ajax({ url: "busca.php", dataType: 'html', // data: {produto:nomeProduto}, type: "POST", beforeSend: function () { $('#carregando').show(); }, success: function(data){ $('#carregando').hide(); $("#resBusca").html('<b>Usuários On-line</b><br /><br/>'+ data ); }, error: function(data){ $('#carregando').html(data); } }); }); }); </script> <style> .fundo { background-color: #eeeeee; padding:0; margin:0 auto; font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; font-size:11px; } </style> </head> <body>

$conexao = mysql_connect('localhost', 'root', 'root') or die ("Erro na conexão ao banco de dados."); mysql_select_db('antonio',$conexao) or die ("Erro ao selecionar a base de dados."); //Select para fazer a busca $sql = mysql_query("SELECT * FROM usuarios") or die ("Não foi possível realizar a consulta."); $total_rows = mysql_num_rows($sql);