Hinweis auf noch nicht gespeicherte Elemente beim Verlassen der Webseite

schliessen-der-seite-warnenEs gibt Momente, an denen man den User daran hindern möchte versehentlich eine Seite zu schließen.

Ein gutes Beispiel dafür ist das Editor Fenster von WordPress. Wird hier eine Änderung nicht gespeichert und das Fenster geschlossen, warnt WordPress, dass die Änderungen verloren gehen, sobald das Fenster geschlossen wird.

Soetwas nachzubauen ist eigentlich ganz einfach und erfordert nur etwas jQuery Code:

Bei Auswahl triggern

Hier ist ein Beispiel dafür, wie man mit Hilfe von .change() bei einer Änderung einer Select Box die Aktion triggern kann, dass beim Schließen der Seite eine Warnung ausgesprochen werden sollte:

jQuery(document).ready(function() {
  /* Die Select Box auf Änderungen abfragen */
  $('.select_box_class').change(function() {
    /* Bei Änderung dem Fenster eine Message "anheften" */
    $(window).bind('beforeunload', function(){
      return "Sie haben Optionen gewählt, die beim Schließen 
              der Seite verloren gehen! Sind Sie sicher, 
              dass Sie diese Seite schließen möchten?";
    });
  });
});

In einem Shop bspw. den Submit Button auslassen

Nach der oberen Variante zählt zum Verlassen der Seite auch ein submit Button. Das wollen wir natürlich nicht! Also müssen wir beim klick auf den Submit Button dem Fester die angehaftete Message wieder abnehmen (unbind)

jQuery(document).ready(function() {
  /* Die Select Box auf Änderungen abfragen */
  $('.select_box_class').change(function() {
    /* Bei Änderung dem Fenster eine Message "anheften" */
    $(window).bind('beforeunload', function(){
      return "Sie haben Optionen gewählt, die beim Schließen 
              der Seite verloren gehen! Sind Sie sicher, 
              dass Sie diese Seite schließen möchten?";
    });
  });
  
  /* Beim Klick auf einen Submit Button */
  $("form").submit(function(){
    /* angehaftete Message wieder entfernen */
    $(window).unbind("beforeunload");
  });
});

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.