Sherif Sherif - 7 months ago 15
Javascript Question

error messages were produced once only

i have the below jQuery code to check the start and end dates , but the error message shows once only and if the user changed the end date with any wrong values no error messages were produced. is there something i'm missing ?

$('input[name="endDate"]').change(function(){
var startDate=$('input[name="startDate"]');
var endDate=$('input[name="endDate"]');
var errorSpan= $('.errorSpan');
$.ajax({
url:'${createLink(controller:'empRef', action: 'checkServiceDatesAjax')}' ,
type:'POST' ,
data:{startDate:startDate.val(), endDate:endDate.val()} ,
success: function(XMLHttpRequest, textStatus, jqXHR) {

},

error: function(XMLHttpRequest, textStatus, errorThrown) {
errorSpan.html("&nbsp;&nbsp;&nbsp;&nbsp;<font color='red'>"+XMLHttpRequest.responseText+"</font>").fadeOut(5000);
endDate.focus();

}
})

});

Answer

This is because when you call fadeOut() on the error message container, it sets its display property to none. When you try to reuse the same element, it is already hidden. You can make it work by ensuring the element is visible before fading it out:

error: function(XMLHttpRequest,  textStatus,  errorThrown) { 
  errorSpan.html("&nbsp;&nbsp;&nbsp;&nbsp;<font color='red'>"+XMLHttpRequest.responseText+"</font>")
  errorSpan.show()
  errorSpan.fadeOut(5000);
  endDate.focus();
}