[Tips] Query – Confirmar cerrado de página.(muy sencillo!)
Hola!, se que es sencillo, pero por experiencia en el blog, me he dado cuenta que estos tips son de gran utilidad para algunos visitantes.
La idea principal es pedir la confirmación por parte del usuario cuando va cerrar la página ( incluso por que se va a cambiar de página por un menú por ejemplo).
Vamos por parte, primero vamos a tener la página:
La idea es que cuando escriban algo, o cambien el dato seleccionado en profesión, o pinchen en sexo o notificaciones, se considere una modificación en la página , por lo cual se debe mostrar el mensaje de confirmación, sin embargo, cuando presionen guardar, no muestre el mensaje. De la misma manera, en los links, hay uno que genera confirmación el otro no.
Para esto, vamos a crear un archivo js, que en mi caso se llama jverificador, con la programación necesaria para lograr lo que queremos, la estructura del sitio de prueba queda de la siguiente manera:
El contenido es el siguiente:
var __modificado = 0;
$(document).ready(function () {
$(".editable").keypress(function () {
__modificado = 1;
});
$(".clickeable").click(function () {
__modificado = 1;
});
$(".cambiable").change(function () {
__modificado = 1;
});
$(".anulable").click(function () {
__modificado = 0;
});
});
window.onbeforeunload = function (e) {
if (__modificado == 1) {
return "Ha modificado datos de página, si continua perderá sus cambios!";
}
};
La idea es simple, distintos selectores css, para distintos controles, por ejemplo, el selector para editable, lo puedo setear para los texbox:
<asp:TextBox ID="TextBox2" class="editable" runat="server"/>
o clickeable, podemos asignarlo a los checkboxs y radiobuttons, cambiable para el dropdown.
Otro ejemplo:
<asp:DropDownList ID="DropDownList1" class="cambiable" runat="server">
Existe una variable __modificado que asume el valor de 1 cuando los eventos antes mencionados suceden , pero también la clase anulable para sacar la marca y no mostrar el mensaje.
Luego en el método onbeforeunload, pregunto por el valor la variable __modificado, si existió una acción o modificación el dato toma el valor 1, en otro caso, simplemente no hace nada.
El resultado es el siguiente:
Puedes ver además que hay una sección que indica:
Al igual que el botón guardar del formulario en uno de estos link no debe pedir confirmación, recordemos que el botón guardar realiza un postback, que si no controlamos mediante la variable __modificado=0, nos pediría confirmación.
Nota, obviamente esto puede generar conflictos como en escenarios en donde se utilice controles con autopostack. Sin embargo en escenarios con Microsoft Ajax funciona ya que no se recarga la página.
Eso!, espero que este archivo JS te sea de utilidad.
Saludos,
Gonzalo