Sayfa yenilenirken javascript ile kontrol etmek

Merhaba,

Sayfa yenilenirken javascript ile kullanıcı uyarmak için kullandığım ufak ama çok faydalı bir script paylaşmak istiyorum. Bu script ile Biz web yazılım geliştiricileri için en önemli hususlardan birisi de sayfadaki formu işlemeden (kaydetmeden) saklamak. Kullanıcılar bazen form üzerinde yaptıkları işlemleri kaydetmeden isteyerek ya da istemeyerek sayfayı yenilemeleri sonucu bütün form girişlerini çöpe gidebilir. Tabi eğer siz anlık olarak bir yere kaydetmiyorsanız. Altta ki script ile en azından sayfadan ayrılırken ya da sayfa yenilenirken formdaki inputlarda değişiklik yapılırsa kullanıcı uyarabilirsiniz.

Sayfanın head kısmına aşağıdaki kodu yerleştirelim. Tek yapmamız gereken kodun içineki ‘#testForm‘ kısmını ve uyarı mesajını değiştirmeniz. Sayfadaki ‘testForm‘ nesnesinin içindeki herhangi bir input nesnesinde değişiklik yaptığınızda sayfayı kapatırken ya da herhangi bir linke basıp sayfadan ayrılırken uyarı mesajını alacaksınız.

<script type="text/javascript">

    //asıl işi yapan fonksiyonumuz
    $.fn.extend({
        trackChanges: function() {
            $(":input",this).change(function() {
                $(this.form).data("changed", true);
            });
        }
        ,
        isChanged: function() {
            return this.data("changed");
        }
    });

    // sayfa açıldığında çalışması için
    $(document).ready(function() {
        $("#testForm").trackChanges();
    });

    // sayfadan ayrıldığımızda tetiklenecek fonksiyon
    window.onbeforeunload = function() {
        if($("#testForm").isChanged()){
            return "Sayfada değişiklikler var, kaydetmeden çıkmak istediğinize emin misiniz?";
        }
    };
</script>

Örnek dosya

Not: window.onunload sadece IE’de çalıştı, webkit browserlarda çalışmadı. window.onbeforeunload IE’de ve webkit browserlarda çalışıyor.