Recargar página usando Sweetalert

Recargar página usando Sweetalert. En este post aprenderemos a como mostrar mensajes de notificación y/o alertas en una web. La forma más común para enviar notificaciones al usuario es la función alert de JavaScript. Sin embargo, esta ventana suele ser bloqueada por los navegadores por el mal uso que se le da.

Ademas, el diseño no es muy profesional que digamos y posee pocas opciones de configuracion y no acpeta imagenes y estilos lo que lo convierte en una opcion no fiable.

¿Cual es la mejor manera de mostrar notificaciones en una web?

La opción más recomendada hasta el momento es el uso del plugin de SweetAlert que nos permite enviar a los usuarios notificaciones y alertas con un diseño mucho más amigable y configurable. Además, nos dan muchas opciones de configuración, con ser:

  • Manejo de colores y tamaños
  • Botones personalizados
  • Varios tipos de notificaciones
  • Es amigable y responsiva

¿Qué es SweetAlert ?

SweetAlert es un plugin basado en jQuery y con el cual podemos generar y crear mensajes emergentes profesionales. Además, posee un repositorio muy activo y nos da la posibilidad de configurar el plugin de varias formas posibles, por ejemplo: Aceptar, Error, Editar, Cancelar, Eliminar, Confirmar, entre otras opciones más.

¿SweetAlert es compatible con diversas resoluciones de pantalla?

La respuesta es un sí, se adapta a cualquier resolución de pantalla incluido la computadora de escritorio, un dispositivo móvil o una tableta en general.

Pueden visitar el repositorio oficial para tener más información.

Ejemplos de tipos de alertas con SweetAlert

A continuación, les dejare un enlace donde podrán ver los diferentes tipos de alertas que posee este plugin y también les dejare el script completo y sus dependencias vía CDN.

Ver Demostración





Alert 
 
Basic alert
Alert title and text
Enablewarning,error,success,infoandquestionstate icons
Change confirm button text and class
Custom button with icon
A custom positioned dialog with timer to auto close
jQuery HTML with custom animate.css animation
A warning message, with a function attached to the confirm button
By passing a parameter, you can execute something else for cancel
A message with a custom image and CSS animation disabled
A message with auto close timer
Ver Demostración

¿Cómo recargar una página después de hacer clic en Aceptar usando SweetAlert?

El plugin SweetAlert para mostrar una notificación básica utiliza la siguiente línea de código

swal("Good job!", "You clicked the button!", "success")

A simple vista se ve casi imposible agregar algún script extra, pero recuerden que este plugin es muy configurable y podemos agregarle código extra.

La solución para recargar la página al aceptar la notificación es agregar y/o configurar de la siguiente manera. Sin embargo, dejaremos 2 ejemplos completos para actualizar la página.

Primera forma: Recargar pagina

Muy funcional y podemos recargar la página, como se puede apreciar se observa el título, el texto de información y el tipo de alerta. Además, se le ha agregado la función location.reload();

swal({
title: "Buen trabajo",
text: "El registro se ha creado!",
type: "success"
},
function(){
location.reload();
}
);

Segunda forma: Recarga pagina

Podemos usar esta configuración algo más directo y en una sola línea de código.

swal({title: "Buen trabajo", text: "Registro actualizado!", type:
"success"}).then(function(){
location.reload();
}
);

Resumen y conclusiones

En este articulo hemos respondido algunas preguntas acerca de este importante plugin. Además, le hemos incorporado la opción de recargar la página al aceptar la notificación.

Hemos dado ejemplos completos de los tipos de alertas que podemos incorporar

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio