¿Cómo detectar datos no guardados en el formulario cuando el usuario abandona la página?

Question

Necesito detectar datos no guardados en el formulario cuando el usuario abandona la página sin enviar el formulario. Me gustaría implementar eso sin agregar un oyente de cambio de valor a cada entrada.

Este es el requisito funcional:

"usuario abre una página que haga clic en cualquier enlace si los valores en la página cambiaron un mensaje emergente de alerta para notificar al usuario que necesita para guardar los datos cambiados, pero si lo hizo no cambiar ningún sistema de cosas sin notificar al usuario ".

Traté de comparar el método de matriz para comparar ambos DTO viniendo para DB y el enlace DTO, pero me da muchos problemas en la longitud de la matriz, y la comparación de bytes.

Answer 1

Esto normalmente se implementa en el lado del cliente con la ayuda de JavaScript, porque no es muy posible interceptar el evento beforeunload desde el lado del servidor cuando el usuario final abandona la página.

Aquí está un ejemplo concreto con la ayuda de la biblioteca de JavaScript jQuery (de lo contrario podría terminar con 10 veces más código para hacerlo correctamente crossbrowser compatible y trabajar juntos sin problemas con el Ajax vuelve a renderizar):

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
    $(function() { 
     // Set the unload message whenever any input element get changed. 
     $(':input').on('change', function() { 
      setConfirmUnload(true); 
     }); 

     // Turn off the unload message whenever a form get submitted properly. 
     $('form').on('submit', function() { 
      setConfirmUnload(false); 
     }); 
    }); 

    function setConfirmUnload(on) { 
     var message = "You have unsaved data. Are you sure to leave the page?"; 
     window.onbeforeunload = (on) ? function() { return message; } : null; 
    } 
</script> 

Simplemente pegue esto en su plantilla <h:head> o simplemente póngalo en algún archivo script.js que incluya por <h:outputScript>.

Answer 2

Esto funcionó para mí.

$(function() { 
      // Set the unload message whenever any input element get changed. 
      $('input').change(function() { 
       setConfirmUnload(true); 
      }); 

      // Turn off the unload message whenever a form get submitted properly. 
      $('form').submit(function() { 
       setConfirmUnload(false); 
      }); 
     }); 

     function setConfirmUnload(on) { 
      var message = "You have unsaved data. Are you sure to leave the page?"; 
      window.onbeforeunload = (on) ? function() { return message; } : null; 
     }