Estoy ejecutando una llamada ajax y cuando intento enviar, mi campo de entrada tiene otro div debajo y muestra un error, pero si hago clic en el botón demasiadas veces, sigue agregando nuevos mensajes uno debajo del otro
y también quiero ocultar el mensaje después de 3 segundos
así que básicamente dos problemas en mi código
$.ajax({ url : $('##frm').attr('data-action'), type: 'post', data: $('##frm').serialize(), success: function(data) { if (data.indexOf("emailissue") > -1) { $("##emailaddress").parent().after("<div class='validation' style='color:red;font-size:0.90em;'>Please Provide valid email address</div>"); $('##validation').delay(3000).fadeOut(); }else{ $("##ID").show().delay(5000).fadeOut(); $("##ID").css('display','none'); } } });html es así
<div class="form-group"> <label for="emailaddress">We are missing you email, please enter below</label> <input type="text" name="emailaddress" id="emailaddress" placeholder="Enter your email" class="form-control"> </div>Intente configurar un elemento de respuesta estático en el DOM:
<div class="form-group"> <label for="emailaddress">We are missing your email, please enter it below</label> <input type="text" name="emailaddress" id="emailaddress" placeholder="Enter your email" class="form-control"> <div id="response" class="validation"></div> </div> Luego, en la respuesta de su llamada ajax, actualice el contenido y la visibilidad del elemento #response :
if (data.indexOf("emailissue") > -1) { $("#response").show().text('Please Provide a valid email address'); setTimeout(function(){ $('#response').fadeOut(); }, 3000); } Al alternar entre ocultar/mostrar el elemento #response , ya no tenemos que preocuparnos de que se agreguen elementos de respuesta adicionales o se eliminen los más antiguos.
Aquí hay una DEMO que hice. Haga clic en el botón "Probar" a la derecha para verlo.
¿Por qué tiene doble '##' cuando intenta seleccionar el elemento?
Además, después de 3 segundos, debe eliminar el nuevo div creado del DOM,
no es suficiente simplemente llamar a fadeOut() (supongo que solo establece la opacidad 0)