Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RobertoSilva007

Efeito Mostar/Ocultar div com dados do Banco

Por , em Javascript

Recommended Posts

RobertoSilva007    0

RobertoSilva007
Postado

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>
<!--Aqui o formulário para a busca-->


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

<br/><br/>
<!--Fim do formulário busca-->

<br />
<div id="carregando" style="display:none;"><img src="carregandoAjax.gif" /></div>
<!--Aqui é onde vai aparecer o resultado da busca-->
<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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

mexicanox    7

mexicanox
Postado

Faz assim:

 


$(document).ready(function(){

//ao inves do click usa o toggle
$("a").toggle(function(){
//var nomeProduto = $("#nomeProduto").val();
$("#resBusca").show();

$(this).text('Ocultar');
$.ajax({

//aqui o seu ajax continua igual

........
});

},

function(){

$("#resBusca").hide();

$(this).text('Mostrar');

});

});

 

Não testei mas é algo desse tipo, uma outra coisa, é que no caso toda a vez que for mosrar o conteudo vai fazer a requisição ajax. Se voce quiser pode tirar a parte do ajax de dentro da função e colca-la separada, assim não fica carregando toda a vez que fizer exibir a div.

 

 

 

 

 

 

 

flws

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoSilva007    0

RobertoSilva007
Postado

E aí mexicanox, beleza cara?

 

Me desculpe pela demora na resposta aki...

 

Bom...a sua dica funcionou perfeitamente...porém...tem um outro pequeno problema...

 

Exemplo:

 

Para Mostrar/Ocultar a lista...é através de um link do tipo "a" né...ou seja, <a href=""></a>, enfim...

porém...como o JQuery está tratando a propriedade ($("a").click(function(event)), agora todos os link's com a mesma propriedade ao ser clicado mostra a lista ao invés de de sua própria função.

 

Tem como concertar isso?

Como eu disse...não sei jQuery...rsss

 

Abraços....

 

Opa...consegui arrumar...

 

Exemplo...

 

Este é o link para mostrar...

 

<p><a href="#" id="mostrar">Mostrar Usuarios On-line</a><br /></p>

 

Bastou eu colocar um id e atribuir um valor, claro...e lá no JavaScript...tratar ele dá seguinte forma...

$("a#mostrar")

 

Bom...até agora tá indo tudo muito bem...

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito