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/><br/>
<!--Fim do formulário busca-->
<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)
Carregando comentários...