Estoy codificando un formulario y necesito una función como la que tiene stackoverflow: "Ha comenzado a escribir o editar una publicación".
Revisé el código de stackoverflow para ver cómo lo hacen, pero no entiendo nada para aplicarlo a mi formulario simple. Esto es lo que tienen en question.js:
function initNavPrevention(b) { if (b.which == "undefined") { return } var a = $("#wmd-input"); a.unbind("keypress", initNavPrevention); setConfirmUnload("You have started writing or editing a post.", a) }Una de las funciones desencadena esto (no sé qué es c):
if (c) { e.keypress(initNavPrevention) } Y finalmente han setConfirmUnload(null); para desactivarlo supongo.
Mi caso es sencillo. Tengo una página en la que cargo un <form /> a través de AJAX y quiero evitar que cuando se carga este formulario abandone la página sin hacer clic en el botón ENVIAR o si el usuario hace clic en CANCELAR, el formulario está deshabilitado y la prevención no aparecerá. .
Teniendo este código, ¿alguien puede decirme cómo puedo incluirlo en mi sitio web?
Esta es mi función AJAX para cargar el formulario:
$("#projects_historics_edit_part_1").click(function(){ $("#ajax-loader").fadeIn('normal'); $.ajax({ url: BASE_URL + 'projects/ajax/get_historics_edit_part_1/' + PROJECT_ID, type: "POST", success: function(data) { $("div#projects_historics_part_1").html(data); $("#client").autocomplete(client_autcomplete_options); var inicofin = $("#initdate, #findate").datepicker(initdate_datepicker_options); } }); $("#ajax-loader").fadeOut("normal"); return false; });¡Gracias de antemano!
Puedes hacer esto usando window.onbeforeunload así:
window.onbeforeunload = function() { return 'Are you sure you want to navigate away from this page?'; }; Entonces, en su código, pondría eso dentro de la devolución de llamada success de su llamada $.ajax .
Para desarmar la confirmación, puede hacer esto:
window.onbeforeunload = null;Además, vea esta respuesta: ¿Cómo puedo anular el cuadro de diálogo OnBeforeUnload y reemplazarlo con el mío?
Así es como en JQuery
$('#form').data('serialize',$('#form').serialize()); // On load save form current state $(window).bind('beforeunload', function(e){ if($('#form').serialize()!=$('#form').data('serialize'))return true; else e=null; // ie; if form state change show box not. });Puede Google JQuery Form Serialize función, esto recopilará todas las entradas de formulario y las guardará en una matriz. Supongo que esta explicación es suficiente :)
Hice una función general para esto basada en la excelente respuesta de Wasim:
var confirm_nav_ignore = []; function confirm_nav() { function save_form_state($form) { var old_state = $form.serialize(); $form.data('old_state', old_state); } // On load, save form current state $('form').each(function() { save_form_state($(this)); }); // On submit, save form current state $('form').submit(function() { save_form_state($(this)); }); // strip fields that we should ignore function strip(form_data) { for (var i=0; i<confirm_nav_ignore.length; i++) { var field = confirm_nav_ignore[i]; form_data = form_data.replace(new RegExp("\\b"+field+"=[^&]*"), ''); } return form_data; } // Before unload, confirm navigation if any field has been edited $(window).on('beforeunload', function(e) { var rv; $('form').each(function() { var $form = $(this); var old_state = strip($form.data('old_state')); var new_state = strip($form.serialize()); if (new_state != old_state) { rv = ''; } }); return rv; }); } // I call it at the end of the on-load handler: $(function() { confirm_nav(); });Cambios:
Puede parecer un exceso de ingeniería, pero eso es lo que tenía que hacer para que funcionara correctamente en una aplicación web real.
Gracias a Wasim, por la gran idea de usar JQuery $(formulario).serialize().