Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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.
Sim, dê um CTRL + SHIFT + J para verificar o erro no Console e diga a mensagme que apareceu.
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.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);
});tecnicamente isso ai funciona sim, desde q essa variavel id esteja definida, e tenha escopo global.
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?
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.
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:
além disso, remova esse action, não faz sentido da forma em q estava:
<form method="post" id="formulario" action="">