[Resolvido] Formulário Modal com envio Ajax Jquery

[Rasp 3]

Fala galera!

Estou desenvolvendo uma tela onde tenho um formulário modal que usa o seguinte script Jquery:

 

	// Lightbox
showLightbox = function(id) {
	var $top = $(window).scrollTop();
	if($.browser.msie == true && parseInt($.browser.version, 10) == 7)
		$('html').css('overflow','hidden');
	else
		$('body').css('overflow','hidden');

	var maskHeight = $(window).height();
	var maskWidth = $(window).width();

	$('#base_content').css('position', 'static');
	$('#mask').parent().parent().css({'position':'static'});
	$('#mask').css({'top':$top, 'width':maskWidth,'height':maskHeight});
	$('#mask').css({opacity:0}).show().fadeTo("fast", 0.8);

	var winH = $(window).height();
	var winW = $(window).width();

	$(id).css('top',  (winH/2-$(id).height()/2)+$top);
	$(id).css('left', winW/2-$(id).width()/2);
	$(id).delay(300).fadeIn('fast');
}

hideLightbox = function(id, callback) {
	$(id).fadeOut('fast');
	$('#mask').delay(200).fadeOut('fast', function() {
		$('#mask').parent().parent().css({'position':'relative'});
		if($.browser.msie == true && parseInt($.browser.version, 10) == 7)
			$('html').css('overflow','auto');
		else
			$('body').css('overflow','auto');

		if(callback)
			callback();
	});
}

// atributo name="modal"
$('a[name=modal]').click(function(e) {
	e.preventDefault();
	var id = $(this).attr('href');
	showLightbox(id);
});

$('a[name=fechar]').click(function(e) {
	e.preventDefault();
	var id = $(this).attr('href');
	hideLightbox(id);
});

$('#mask').click(function() { $('a[name=fechar]').trigger('click'); });

 

 

Até aí tudo bem, o problema começa quando coloco o envio por Ajax Jquery, onde o envio não funciona de jeito nenhum.

 

O script para envio é esse:

 

	// Quando o formulário for enviado, essa função é chamada
$("#formulario").submit(function() {
	// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
	var nome = $("#nome").val();
	var email = $("#email").val();
	var assunto = $("#assunto").val();
	var depto = $("#depto").val();
	var msg = $("#msg").val();
	// Exibe mensagem de carregamento
	$("#status").html("<img src='images/loader.gif' alt='Enviando' />");
	// Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
	$.post('envia-email.php', {nome: nome, email: email, assunto: assunto, depto: depto, msg: msg }, function(resposta) {
			// Quando terminada a requisição
			// Exibe a div status
			$("#status").slideDown();
			// Se a resposta é um erro
			if (resposta != false) {
				// Exibe o erro na div
				$("#status").html(resposta);
			} 
			// Se resposta for false, ou seja, não ocorreu nenhum erro
			else {
				// Exibe mensagem de sucesso
				$("#status").html("Mensagem enviada com sucesso!");
				// Limpando todos os campos
				$("#nome").val("");
				$("#email").val("");
				$("#assunto").val("");
				$("#depto").val("");
				$("#msg").val("");
			}
	});
});

 

HTML

<div id="status"></div>
<form method="post" id="formulario" action="javascript:func()">
<strong>Nome:</strong>
<input type="text" name="nome" id="nome" />
<strong>Email:</strong>
<input type="text" name="email" id="email" />
<strong>Assunto:</strong>
<input type="text" name="assunto" id="assunto" />
<select name="depto" id="depto">
	<option>- Selecione o Departamento -</option>
	<option value="Comercial">Comercial</option>
	<option value="Financeiro">Financeiro</option>
	<option value="Suporte">Suporte</option>
</select>
<strong>Mensagem:</strong>
<input type="text" name="msg" id="msg" />
<input type="submit" value="Enviar" />
</form>

 

Alguém pode me ajudar nessa questão?

 

PS: Não necessita de plugin algum, tudo somente com Jquery.

[William Bruno 1501]

Aperte Ctrl+Shift+J no teu Firefox, e verifique se aparece algum erro no console.

 

para debugar se a função está sendo chamada, verifique se este alert, é exibido:

$("#formulario").submit(function() {
       alert( 'formulario enviado' );

 

além disso, remova esse action, não faz sentido da forma em q estava:

<form method="post" id="formulario" action="">

[Rasp 3]

Olá William,

Fiz o que você falou, retirei o action, e coloquei o alert dentro do submit e é aberto.

 

O problema é que ao clicar no enviar, o e-mail não é enviado e o model é fechado, sem aparecer o loader e sem printar qualquer mensagem.

[Dii 15]

Sim, dê um CTRL + SHIFT + J para verificar o erro no Console e diga a mensagme que apareceu.

[William Bruno 1501]

aqui:

 

                });

       return false;
       });

antes de acabar o submit, adicine esse return false, para q o comportamento default do form, não impeça o envio do ajax.

[Rasp 3]

Agora funcionou perfeitamente, Obrigado William.

 

Pode só me tirar uma dúvida?

Pensei em colocar de alguma forma que o modal se feche sozinho puxando o script "fechar" depois de algum tempo. Como faço para aguardar esse tempo?

 

Pensei em algo assim:

               });
       return false;
      setTimeout(function() { hideLightbox(id) }, 3000);
       });

[William Bruno 1501]

tecnicamente isso ai funciona sim, desde q essa variavel id esteja definida, e tenha escopo global.

[Rasp 3]

Como não sou bom nisso... boiei, porque simplismente copiei do modal, mas pelo que pude entender o ID deste modal teria de ser especificado certo?

 

Pode me dar uma luz?

[William Bruno 1501]

não sei qual é o botão q dispara, mas você precisa mandar igual:

 

window.setTimeout(function(){ hideLightbox('#formulario') }, 3000);

você só vai ficar bom, qndo tentar fazer, ver q deu errado, e continuar tentando.