Nuevo en Ajax... ¿cómo puedo devolver mi CSS a su valor predeterminado después de una llamada ajax? (por ejemplo, recargar CSS)

Muy bien, estoy usando una llamada jQuery ajax() para obtener una respuesta de una página php para enviar/verificar un formulario. Cuando tiene éxito, se devuelve una lista de elementos del formulario y los mensajes correspondientes que indican cuál es el problema (p. ej., campo faltante, entrada no válida, etc.).

Luego usa jQuery nuevamente para recorrer cada uno de los elementos de formulario devueltos por la llamada ajax y altera su css (importado a través de ), por ejemplo, hace que los elementos bordeen rojo, para indicar un error con ese elemento.

Esto funciona bastante bien. Pero, digamos que envío el formulario con un campo faltante: ajax hace la llamada y el css de la página se modifica para resaltar ese campo en rojo. Ahora digamos que soluciono el problema con ese campo (por ejemplo, le doy datos válidos) y lo vuelvo a enviar, pero esta vez falta un campo diferente. Si bien le dará al nuevo campo faltante un borde rojo, no quitará el borde rojo del campo que estaba correctamente en el reenvío. En otras palabras, nunca puedo borrar el borde rojo una vez que está allí.

Estoy pensando que podría necesitar hacer una función de tipo "recargar css" en javascript para recargar el css después de la llamada ajax ... ¿o algo así? Realmente no lo sé. Sin embargo, esto parece que debería ser algo muy común que se quiera hacer. Al leer, parecía que podría tener algo que ver con el almacenamiento en caché de la página, pero no creo que tenga control sobre ese tipo de cosas.

Podría valer la pena mencionar que estoy usando Less CSS. Halpz?

preguntado el 03 de mayo de 12 a las 19:05

2 Respuestas

No estoy seguro de cómo se agregan los bordes/estilos en la devolución de llamada, pero sugeriría agregar una clase css a los campos de formulario que faltan con los estilos declarados en esa clase. Luego, usando una declaración 'si' o un evento de enfoque, elimine la clase cuando los usuarios vuelvan a hacer clic en ella.

contestado el 03 de mayo de 12 a las 19:05

Creo que estás pensando demasiado en esto. No desea modificar el CSS directamente con jQuery. Solo desea activar y desactivar las clases.

Así que si este es tu campo:

<input type="text" />

Y hay un error, haz que el servidor devuelva esto:

<input type="text" class="error" />

Entonces, si necesita desactivar el estado de error

$theInput.removeClass("error")

De esa manera, no está tocando CSS directamente y no hay necesidad de 'recargarlo' (no es que eso solucione el problema).

contestado el 03 de mayo de 12 a las 19:05

Esto es ciertamente más elegante que lo que estaba haciendo, pero sigo teniendo el mismo problema... No llevo un registro de los campos que son válidos, solo de aquellos que no son válido. Supongo que podría hacer un $("formulario *").removeClass("error") (para devolver el formulario a su estado original) después de cada llamada ajax, pero pensé que habría algo un poco más abstracto, ya que es probable que esto sea algo común que quieras hacer. - user891876

Necesito más aclaraciones, ¿dónde estás haciendo la validación real? ¿ES eso del lado del cliente o del lado del servidor? Si es del lado del servidor, simplemente adjunte la clase ERROR allí. Luego, para restablecer, haga exactamente lo que tiene... simplemente elimine la clase de todos ellos. - DA.

Estoy de acuerdo con DA, aunque en lugar de $("form *") Yo iria con $("form .error") or $("form input") al eliminar las clases de error, solo por un poco más de eficiencia. - david millar

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.