Confirmez de quitter la page lors de la modification d'un formulaire avec jQuery

Je suis le codage d'un formulaire et j'ai besoin d'une fonction comme stackoverflow avoir: "Vous avez commencé à écrire ou éditer un post.".

J'ai regardé à travers le code de stackoverflow pour voir comment ils le font, mais je n'ai pas à demander à mon formulaire simple. C'est ce qu'ils ont sur 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)
}

L'une des fonctions les déclencheurs de cette (je ne sais pas ce que c est):

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

Et, enfin, ils ont setConfirmUnload(null); pour le désactiver, je suppose.

Mon cas est simple. J'ai une page où je charge un <form /> via AJAX et je veux éviter lorsque ce formulaire est chargé de quitter la page sans avoir à cliquer sur le bouton SOUMETTRE ou si l'utilisateur clique sur ANNULER le formulaire est désactivé et la prévention ne sera pas de popup.

Avoir ce code, quelqu'un peut-il me dire comment je peux l'inclure sur mon site web?

C'est ma fonction AJAX pour charger le formulaire:

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

Vous en remercie d'avance!

source d'informationauteur udexter

  1. 24

    Vous pouvez faire cela en utilisant window.onbeforeunload comme ceci:

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

    Donc, dans votre code, vous met à l'intérieur de la success rappel de votre $.ajax appel.

    Pour désactiver la demande de confirmation, vous pouvez le faire:

    window.onbeforeunload = null;

    Aussi, de voir cette réponse: Comment puis-je remplacer la OnBeforeUnload dialogue et de le remplacer par le mien?

  2. 11

    C'est comment 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;
    //i.e; if form state change show box not.
});

    Vous pouvez Google JQuery Formulaire de fonction Serialize, cela permettra de recueillir toutes les entrées d'un formulaire et l'enregistrer dans le tableau. Je suppose que c'expliquer, c'est assez 🙂

  3. 2

    J'ai fait une fonction générale de cette fonction sur Wasim excellente réponse:

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

    Changements:

    1. Permet d'envoyer un formulaire sans confirmation.
    2. Fonctionne avec de multiples formes, à l'aide de $('form').chaque(...)
    3. Ne dépend pas de la forme id="formulaire"
    4. Renvoie " comme c'est la coutume de message de confirmation, au lieu d'un vrai qui affiche "true" dans Chrome.
    5. Pour les pages difficiles, il peut être dit à ignorer certains champs de formulaire.
    6. L'exécuter à partir de la fin de la sur-gestionnaire de chargement... semble être une bonne idée.
    7. C'est assez générique, de sorte que nous pouvons l'utiliser sur chaque page d'un site.

    Qu'elle puisse être conçu, mais c'est ce que j'avais à faire pour le faire fonctionner correctement dans une véritable application web.

    Grâce à Wasim, pour la bonne idée d'utiliser JQuery $(document).serialize().