Confermare di lasciare la pagina quando si modifica un modulo con jQuery

Question

Sto codificando un modulo e ho bisogno di una funzione come StackOverflow: "Hai iniziato a scrivere o modificare un post.".

Ho esaminato il codice di StackOverflow per vedere come lo fanno, ma non lo ottengo affatto per applicare alla mia forma semplice. Questo è ciò che hanno il 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 delle funzioni attiva questo (non so che cosa c è):

if (c) { 
    e.keypress(initNavPrevention) 
} 

E infine hanno setConfirmUnload(null); per disabilitarlo I supporre.

Il mio caso è semplice. Ho una pagina in cui carico un <form /> tramite AJAX e voglio evitare che quando questo modulo viene caricato per uscire dalla pagina senza fare clic sul pulsante INVIA o se l'utente fa clic su ANNULLA il modulo è disabilitato e la prevenzione non verrà visualizzata.

Avendo questo codice, qualcuno può dirmi come posso includerlo sul mio sito web?

Questa è la mia funzione di AJAX per caricare il modulo:

$("#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;  
}); 

Grazie in anticipo!

Answer 1

È possibile farlo utilizzando window.onbeforeunload come questo:

window.onbeforeunload = function() { 
    return 'Are you sure you want to navigate away from this page?'; 
}; 

Quindi nel tuo codice, si metterebbe che all'interno del success callback del vostro $.ajax chiamata.

Per disinserire la conferma, si può fare questo:

window.onbeforeunload = null; 

Inoltre, questa risposta: How can I override the OnBeforeUnload dialog and replace it with my own?

Answer 2

Questo è il modo in 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; 
    // i.e; if form state change show box not. 
}); 

Puoi Google JQuery Modulo Serialize funzione, questo raccoglierà tutti gli input del modulo e lo salverà nell'array. Credo che questo sia sufficiente a spiegare :)

Answer 3

Ho fatto una funzione per questo in base alla risposta eccellente di 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(); 
}); 

Modifiche:

1. Consente di inviare un modulo senza conferma.
2. Compatibile con molteplici forme, utilizzando $ ('forma'). Ciascuno (...)
3. non dipende dalla forma avendo id = "forma"
4. Returns '' come il messaggio di conferma personalizzato, invece di true che visualizza "true" in Chrome.
5. Per le pagine difficili, si può dire di ignorare determinati campi modulo.
6. Eseguirlo dalla fine del gestore on-load ... sembra una buona idea.
7. È abbastanza generico, quindi è possibile utilizzarlo in ogni pagina di un sito.

Potrebbe sembrare eccessivamente ingegnerizzato, ma è quello che dovevo fare per farlo funzionare correttamente in una vera web app.

Grazie a Wasim, per la grande idea di utilizzare JQuery $ (form) .serialize().