Mostrar mensagem "carregando"

9 de abril de 2012 4 respostas

maxcanoas 9 de abril de 2012

No site que eu estou trabalhando, tem uma página inicial com as turmas do professor. Ao lado de cada turma, tem um botão “Alunos”, e quando clica no botão, aparece a lista com os nomes. Isso acontece via Ajax. Pois bem, quando eu clico no botão Alunos, deve aparecer uma mensagem ao lado do botão que diz: “Buscando, aguarde…”. Até então isso acontece, o meu problema é que, esse aviso aparece sempre ao lado do botão da primeira turma, independente de quantas turmas eu tenha. Eu posso ter 10 turmas, se eu clicar na décima e o aviso vai aparecer na primeira linha.

Como eu faço pra aparecer exatamente ao lado do botão onde eu estou clicando?

4 Respostas

Luciano_Lopes 9 de abr. de 2012

Pode postar o seu html?

maxcanoas 9 de abr. de 2012

Aqui é o seguinte...

O primeiro echo que eu estou dando, é o botão onde o usuário clica para aparecer a lista..
O segundo é o aviso que deve aparecer..
O terceiro é a div onde é carregada a lista que aparece na tela...

echo "&nbsp;&nbsp;&nbsp;<a href=\"#\" onclick=\"javascript: exibe('campoResposta$idTurma');\"><img src=\"figuras/alunos.gif\" border='0' align=\"absmiddle\" onClick=\"chamaAluno($idTurma);\"></a>";
  
	echo "<span class=\"style2\" id=\"campoAviso\"></span><br>";
 
	echo "<div id=\"campoResposta$idTurma\" style=\"display:none\"></div>";

E o meu código javascript que está fazendo isso funcionar é o seguinte..
É o último function da lista o script da mensagem...

var idT;

function trataDados(){
	Aviso(0);
	var nomeCampo = "campoResposta"+idT;
	var info = ajax.responseText;  // obtém a resposta como texto
	document.getElementById(nomeCampo).innerHTML=info;	
	idT=0;

}

function chamaAluno(idTurma){
	Aviso(1);
	idT=idTurma;
	var url = "RetornaAluno.php?idTurma="+idTurma;
	requisicaoHTTP("GET",url,true);
}

function exibe(id) {
	if(document.getElementById(id).style.display=="none") {
		document.getElementById(id).style.display = "inline";
	//Aviso(1);
	}
	
	else {
		document.getElementById(id).style.display = "none";
	}

}

function Aviso(mostrar){

	if(mostrar) // exibe o aviso
	{
		document.getElementById('campoAviso').style.backgroundColor="yellow";
		document.getElementById('campoAviso').innerHTML="&nbsp;Buscando, aguarde...";
	}
	else
	{
		document.getElementById('campoAviso').innerHTML="";
	}
}

Mitidiero 9 de abr. de 2012

cara, vc tem que setar a posição da mensagem de acordo com o id do botão que clicou.

Ou seja

1 - Cada botão terá um id (pode ser o id da turma, somado a paalvra turma: turma1, turma2 e assim vai)
2 - Todos os botões terão uma mesma classe (chamaremos de btnTurma)
3 - No evento on click da CLASSE btnTurma, vc captura o valor LEFT e o valor TOP, e seta na div da MENSAGEM “buscando, aguarde…”, pronto =)

[EDITADO]

Cara, use jquery, javascript puro é MUITO problemático.

Abraços!

maxcanoas 10 de abr. de 2012

Beleza, não é tão complicado. Mas seguinte, tenho pouca experiência com Jquery, usei apenas uma vez e ainda não entendo muito. Como seria a estrutura aproximadamente do que eu preciso para essa situação?

Criado 9 de abril de 2012

Ultima resposta 10 de abr. de 2012

Respostas 4

Participantes 3

4 Respostas

Topicos relacionados