I have been working with JQuery and Bootstrap 3. On my Login form I have and option where user can click on forgot password link. That will open Modal box where they can enter their email and submit that form. However, this all works fine but I have one thing that I really don't like. So let's say user enter the email and send request, if email is incorrect they will see the message eon the screen with alert box in red. I have set this to show for 15 seconds and then disappear. So if user foes right away and try to enter email again and message returns back timer is not reset. They will see that message for lets say 5 seconds since timer counted 10 seconds from the previous message already. I'm not sure what would be the best option to work around this problem. I use JQuery delay() to set the timer and fade() to add effect on the element. Here is example of my code:
$('#Forgot-Form').on('submit', function(e){
e.preventDefault();
var frmEmail = $.trim($('#user-email').val());
$.ajax({
type: 'POST',
url: 'Functions.cfc?method=checkAccount',
data: {'email':frmEmail},
dataType: 'json'
}).done(function(obj){
if(obj.STATUS == "200"){
$('#accountBox').removeClass().addClass('alert alert-success').show().html('<stron>Success!</strong>').delay(15000).fadeOut('slow').queue(function(){
$(this).removeClass('alert alert-success').dequeue();
});
}else{
$('#accountBox').removeClass().addClass('alert alert-danger').show().html('<strong>Error!</strong>').delay(15000).fadeOut('slow').queue(function(){
$(this).removeClass('alert alert-danger').dequeue();
});
}
}).fail(function(jqXHR, textStatus, errorThrown){
alert("Error: "+errorThrown);
});
});
I use .dequeue() to remove the class but that will happen after delay is timed out. If anyone knows what is the better option to handle these situations please let me know.
