Problema com Dialog (JQuery)

Front-end
#1

Boa tarde, meu problema é o seguinte:

Eu tenho uma div vazia na minha tela de login. Quando eu usuario clica no botão logar ele chama a seguinte função:

var params = $(loginForm).serialize(); $.ajax({ type : 'post', data : params, url : Login, success : function(data) { $(container).load("ResultadoLogin.jsp"); } });

Login é a minha Servlet que efetua o Login.

A página ResultadoLogin.jsp possui uma condição if em jstl que verifica se foi criado uma sessão. Caso sim, redireciona o usuário para a pagina Index.jsp caso contrário ele carregará o seguinte:

<html>
         <body>
                    <div id="resultadoLoginCorpo" title="Usuário e Senha Incorretos!">O usuário e a senha inseridos estão incorretos!</div>
         </body>
</html>

O problema é que quando ele carrega o código acima ele coloca o texto “O usuário e a senha inseridos estão incorretos!” bem no meio da página por mais ou menos 1 segundo e só depois ele cria o dialog.

Eu pensei em colocar um style=“visibility: hidden” (por algum motivo se eu coloco ele como hidden no arquivo .css dele ele não fica escondido, e eu estou fazendo o máximo para deixar qualquer código de javascript em arquivos .js, códigos de css em arquivos .css e por ai vai) na div e depois de 1 segundo eu passar de hidden para visible mas ficou me cheirando a gambiarra.

Existe alguma solução, digamos, elegante para este problema?

#2

Ola,

porque vc nao simplifica isso? Tipo, vc faz um request para o servidor para fazer o login e depois outro request somente para saber se a sessao foi criada??

Eu faria algo tipo:

O php que recebe os dados digitados no form e faz o login, verifica se a sessao foi criada e retorna um json tipo:

{ isUserLoggedIn: true, isSessionCreated: true }

true ou false, dependendo dos checks que vc faz, claro. :slight_smile:
Ai no cliente vc faz:

var params = $(loginForm).serialize();
$ajax({
	type : 'post',
	data : params,
	url : Login,
	success : function(data) {
		 // pode pode enviar um json object, com uma flag para indicar se o login foi feito com sucesso e
		 // a sessao foi criada.
		 if(data.isUserLoggedIn && data.isSessionCreated) {
			 console.log("login ok"); //debug, trocar pelo codigo para direcionar para outra pagina aqui.
		 }
		 else {
			 console.log("login failed"); //debug, trocar pelo codigo que exibe messagem de erro.
		 }
	}
});

Eh importante vc retornar algum dado quando vc faz o login, porque a funcao especificada em success vai ser executada quando se o request executar com sucesso, independente se o usuario conseguiu logar ou nao.
Adicionalmente, eh uma boa ideia especificar uma funcao de erro eh caso o request para o servidor falhe de alguma maneira.

Eu acho um disperdicio, fazer dois requests para uma coisa tao simples.

Quanto ao dialog, eu acho que vc poderia usar display: none, ao inves de visibility:hidden, fiz um exemplo aqui:

<html>
	<head>
		
		<title>test jquery</title>
		
		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" ></script>
		<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" />

        <style>
	       .dialog { display:none; }
	    </style>	

		<script type="text/javascript">

			$(document).ready(function() {
				$("#button1").on("click", function() {				
					$("#errordialog").dialog();
				});			
			});			

		</script>
		
	</head>

	<body>

	<br>
	<input type="button" id="button1" value="Display dialog"/>
	<div id="errordialog" title="Erro" class="dialog">Somente uma mensagem de error!</div>
	<br>

	</body>
</html>

//Daniel

#3

[quote=windsofhell]Ola,

porque vc nao simplifica isso? Tipo, vc faz um request para o servidor para fazer o login e depois outro request somente para saber se a sessao foi criada??

Eu faria algo tipo:

O php que recebe os dados digitados no form e faz o login, verifica se a sessao foi criada e retorna um json tipo:

{ isUserLoggedIn: true, isSessionCreated: true }

true ou false, dependendo dos checks que vc faz, claro. :slight_smile:
Ai no cliente vc faz:

var params = $(loginForm).serialize();
$ajax({
	type : 'post',
	data : params,
	url : Login,
	success : function(data) {
		 // pode pode enviar um json object, com uma flag para indicar se o login foi feito com sucesso e
		 // a sessao foi criada.
		 if(data.isUserLoggedIn && data.isSessionCreated) {
			 console.log("login ok"); //debug, trocar pelo codigo para direcionar para outra pagina aqui.
		 }
		 else {
			 console.log("login failed"); //debug, trocar pelo codigo que exibe messagem de erro.
		 }
	}
});

Eh importante vc retornar algum dado quando vc faz o login, porque a funcao especificada em success vai ser executada quando se o request executar com sucesso, independente se o usuario conseguiu logar ou nao.
Adicionalmente, eh uma boa ideia especificar uma funcao de erro eh caso o request para o servidor falhe de alguma maneira.

Eu acho um disperdicio, fazer dois requests para uma coisa tao simples.

//Daniel[/quote]

Obrigado por responder.

Eu poderia ter feito também a Servlet redirecionar o usuário direto para a página principal caso o login fosse efetuado com sucesso (ou mostrar a mensagem de falha de login caso a sessão não fosse criada) mas optei por essa forma por algum motivo que não consigo me recordar hehe :oops:

Eu não tinha colocado um tratamento de erros porque até recentemente eu usava o load para fazer ajax (e só passei a usar $ajax porque não estava conseguindo usar o metodo post com o load).

Atualmente o meu maior problema é o seguinte:

Quando eu carrego um dialog por ajax, ele mostra todo o conteudo do dialog fora do dialog (isso é, antes do dialog ser carregado) bem no meio da tela por aproximadamente 1 segundo e só depois ele carrega o dialog (e coloca o conteudo que ficou no meio da tela dentro do dialog).

Eu tenho esse problema não só nessa parte mas em várias outras.

Espero não ter deixado minha explicação confusa :lol:

#4