[SOLUCIONADO] ¿Se dispara algún evento al activar una solapa del navegador?

[Integer78]

Hola estoy haciendo un pequeño sistema en PHP + JavaScript. Muestro unos datos en una tabla, y con botón que dice agregar, abro otra solapa en la que hay un formulario y el usuario puede cargar nuevos datos.
Lo que yo quisiera es que cuando el usuario cierre la solapa del formulario y vuelva a la de la tabla, aparezcan los nuevos datos. Por ahora me las he ingeniado poniendo un botón que dice: Actualizar datos, y allí refresco, pero gustaría que esto suceda de forma automática. ¿Hay algún evento que se dispare al activar una solapa del navegador? O cómo puedo hacer para lograr lo que quiero? Desde ya muchas gracias.

[ArturoGallegos]

Empecemos por entendernos, ¿que es una solapa? Un modal, un popup otra cosa?

Otro detalle, no has mostrado tu código, debes colocar el codigo que tienes con que haz intentando resolver el problema, si lo hubieras es probable que se entendiera tu pregunta aunque desconozcamos que es una solapa.


... Jugando a las adivinanzas... ya intentaste con un push() o append(). ???

[Alexis88]

Si a lo que te refieres es a agregar, modificar o eliminar datos en la base de datos en una ventana o pestaña y que en otra se observe el resultado en tiempo real, te vendría bien implementar la tecnología websockets. Pero si todo se realiza en una misma vista dividida en pestañas o divisiones asolapadas unas sobre otras que se muestran mediante clics, tan solo tendrías que recargar los datos de la vista que muestra el resultado mediante AJAX una vez que se hayan completado las operaciones en la base de datos.

[Panino5001]

Es cierto que es todo bastante confuso, pero creo que se refiere a usar opener para refrescar la ventana inicial que ha abierto un popup (bastante old school).

Código:

//cuando se presione el botón para guardar los datos en la ventana secundaria:
opener.location.reload();//refresca la ventana principal
self.close();//cierra el popup (ventana secundaria) abierto con window.open desde la ventana principal

[Integer78]

Perdonen si no he sido claro. La cosa es así (es simple):
Tengo un archivo, tabla.php en la que hago una consulta a una tabla y muestro los datos en una tabla HTML. Puse un link que dice "Agregar datos" mediante el cual abro un segundo archivo formulario.php con el atributo target="_blank" por lo que se abre en otra pestaña del navegador. El usuario allí puede agregar datos a la tabla de la base de datos. Lo que yo quiero es que cuando cierre esta pestaña y vuelva a la original, se le refresque automáticamente para que pueda ver los datos que acaba de agregar.

[Panino5001]

¿Porqué no usas target="_self" y colocas un botón volver?

Código:

<button onclick="history.go(-1)">volver</button>

También en lugar de usar target="_blank" podrías abrir esa ventana con window.open("loquesea.html"). De esa manera podrías usar lo que te sugerí en el posteo anterior.

No obstante, lo mejor sería como te dijeron, usar AJAX o websockets o algo semejante.

[Integer78]

Si! Lo quiero hacer con Ajax, se programar con Ajax. Lo que no me doy cuenta es cómo detectar cuando el usuario cierra la pestaña del formulario y regresa a la original. Pensé que tal vez existía algún evento que se produzca al activar una pestaña del navegador y entonces ahí disparar mi código para actualizar la tabla. Esa es puntualmente mi duda.

[Alexis88]

Iniciado por Integer78

Si! Lo quiero hacer con Ajax, se programar con Ajax. Lo que no me doy cuenta es cómo detectar cuando el usuario cierra la pestaña del formulario y regresa a la original. Pensé que tal vez existía algún evento que se produzca al activar una pestaña del navegador y entonces ahí disparar mi código para actualizar la tabla. Esa es puntualmente mi duda.

Puedes apoyarte con el evento visibilitychange de la API Page Visibility. Cuando la pestaña está activa, el valor de la propiedad visibilityState del documento será visible.

Código Javascript:

document.addEventListener("visibilitychange", function() {
    if (document.visibilityState == "visible") {
        //Hacer algo
    }
});
 

En este caso, podrías actualizar la pestaña luego de que vuelva a tomar el foco, pero ten en cuenta que eso no se supeditará a si cierras o no otra pestaña. Otra forma de hacer esto de una manera más eficiente es mediante el empleo de websockets, así, cuando se modifiquen datos en la base de datos tanto en otra pestaña como en otro navegador e incluso en otro ordenador o dispositivo móvil, los datos que se muestran en la pestaña se actualizarán automáticamente.

[Integer78]

Bien perfecto ahí entendí. Muchas gracias a todos por las respuestas!