Wordpress'in admin panelinde bir yazı düzenlerken browserdan çıkış yaptığınızda "Bu sayfadan ayrılırsanız yapmış olduğunuz değişiklikler kaybolacaktır. Bu sayfadan ayrılmak istediğinize emin misiniz?" şeklinde uyarı ile karşılaşırsınız ve sizden çıkış yapmak istediği. Yine aynı şekilde gmail ile yeni e-posta oluştururken e-posta'yı göndermeden pencereyi kapatırsanız benzer uyarı alırsınız. Bu uyarıyı verdiren jquery kodu:
jQuery(function(){
jQuery(window).bind('beforeunload', function () {
return 'Bu sayfadan ayrılırsanız yapmış olduğunuz değişiklikler kaybolacaktır.';
});
});
Kodu bu şekilde sayfaya eklediğinizde kullanıcı formu submit ettiğinde yine aynı uyarıyı alacaktır. Bunun önüne geçmek için formun submit anında "beforeunload" olayını iptal edeceğiz. Şöyleki:
jQuery(function(){
jQuery('#form-id').submit(function(){
jQuery(window).unbind('beforeunload');
});
});
Bu yöntemle sistemden çıkış yapmadan browser penceresini kapatarak çıkan kullanıcının durumunu güncelleyebiliriz. Örneğin online kullanıcı listesi yaptınız ve bu listede giriş yapmış olan kullanıcılarınızı listeliyorsunuz. Kullanıcı çıkış linkine bastığınızda siz veritabanından durumunu çıkış yapmış olarak güncellersiniz ve online kullanıcı listesinden bu kullanıcı düşer. Fakat kullanıcı browser'dan çıkış yaptığında bu şansa sahip değilsiniz. Göstermiş olduğum yöntem ile kullanıcı browserdan çıkış yaptığında ajax ile durumunu güncellersiniz.
Benim bu yöntemi nerede kullandığımdan bahsetmek istiyorum. Bir form ekranım var ve bu form ekranımda bir kaydı aynı anda en fazla bir kişinin güncellemek için açabilmesini istiyorum. Siz bunu wordpress'deki yazı ekleme ekranı olarak düşünün. Veritabanında gidip "güncelleniyor" adında bir alan açtım ve bu alan değeri "1" olduğunda o yazıyı güncellemek üzere başka bir kullanıcının açtığını anlıyorum, "0" olduğunda ise o yazıyı güncellemek için açan başka bir kullanıcı olmadığını göstermektedir kullanıcı yazıyı güncellemek için açtığında yazının veritabanındaki "güncelleniyor" bilgisini "1" yapıyorum. Kullanıcı güncelleme ekranında kaydet butonuna veya vazgeç butonuna bastığında kullanıcının yazıyla işini tamamladığından dolayı server tarafında o yazının veritabanındaki "güncelleniyor" bilgisini "0" yapıyorum. Fakat kullanıcı kaydet veya vazgeç butonuna basmadan direkt browserdan çıktığında yazının "güncelleniyor" bilgisini nasıl değiştireceğim ? İşte bunun için bahsettiğim yöntemi kullacağız.
var sayac = 0;
jQuery(function(){
jQuery(window).bind('beforeunload', function () {
if (sayac == 0) {
$.ajax({
async: false,
url: 'yazi_durum_guncelle.php?yazi_id=10'
});
}
sayac++;
});
});
Pencere kapatıldığında ajax istek yapıp yazının durumunu güncelliyoruz. Burada dikkat etmemiz gereken "async:false" değeridir. Çünkü bunu yaptığımız zaman ajax isteğimizin asenkron çalışmasını sağlayarak ajax isteği bitene kadar pencerenin kapanmamasını sağlıyoruz ve böylece ajax isteğimizin sonlanmasını sağlıyoruz."async:false" eklemediğiniz zaman ajax isteği sonlanmadan pencere kapanır ve yazı durumu güncellenemez.
Test yaparken ajax isteğinin iki defa gerçekleştiğini farkettim, emin olmak için alert ile test edince iki defa alert aldım. Bundan dolayı sayac değişkeni tutarak ajax isteğinin bir defa gerçekleşmesini garanti altına aldım.
Ajax senkron ve asenkron çalışması hakkında buradan bilgi alabilirsiniz.
Son örnek, anlattığım yöntemi kullanabileceğiniz alana sadece bir örnekti.
İyi çalışmalar.
Teşekkürler..Uzun süredir merak ettiğim bir konuydu..
Merhaba;
peki bu sayfa ayrılma mesajı sayfa refresh luncada çıkıyor, herhangi bir butona basınca da çıkıyor. Ben sadece sayfa kapatılırken bu mesajın çıkmasın istiyorum.
var mı bildiğiniz bir yol?
Şimdiden teşekkürler.
Kolay Gelsin.
eğer f5 e bastığında mesaj çıkmasın istiyorsan şu kodu eklemelisin
butona tıkladığında yazı içerisinde verdiğim örnekteki gibi unbind metoduyla mesajı iptal edebilirsin.
jQuery(function(){ jQuery('#button-id').click(function(){ jQuery(window).unbind('beforeunload'); }); });Merhaba;
dostum çok teşekkür ederim. çok işime yaradı.
Not: buton içine yazılan kodda # den sonra sayfaya eklediğiniz buton un id sini yazın. alexandar ornek olsun diye id yazmış sağ olsun.
Merhaba;
rica ederim iyi çalışmalar.
Merhaba, bu kod benim de çok işime yarayacak fakat masterpage den türettiğim bir sayfam var.
Kod yalın bir sayfada çalışırken türettiğim Sayfa içinde button a basınca yine uyarı geliyor. beforeunload olayını engelleyebileceğim bir yol var mıdır, tavsiye edebileceğiniz?
peki ben bunu ajax ile dosya yollarken aktif hale getirip ozaman çıkılmak istenirse uyarı verse . dosya yolladığında pasif hale gelmesini isitiyorum. nasıl yapabilirim acaba
Aslında bu yapmak istediğinin mantığı 2. örnekteki ile birebir aynı.
upload için bir upload eklentisini kullandığını veya ajax ile kendin yaptığını varsayarak, upload işlemi başladığında ki callback(onUploadStart) içerisinde pencere kapatıldığında uyarı veren event bind etmelisin, upload bittiğindeki callback(onUploadEnd) içerisinde pencere kaptıldığında uyarı veren event unbind etmelisin.
dostum aşağıdaki kodlar çalışır durumda şimdi burada anlattıklarını nasıl uygulayabilirim. konu başka göre dağılmış gibi gözüksede senin verdiğin kodları pencere kapatırken sorunsuz şekilde söylediğin mantıkla çalıştırdım. şimdi link tıklaması yaparsa dosya yüklerken bunu çalıştırım. işim bittiğinden başka yerden sonlandırmam gerekiyor. teşekkür ederim.
upload işlemi başladığında ki callback(onUploadStart) içerisinde pencere kapatıldığında uyarı veren event bind etmelisin, upload bittiğindeki callback(onUploadEnd) içerisinde pencere kaptıldığında uyarı veren event unbind etmelisin.
(function (){
$(“a”).click(function(event) {
event.preventDefault();
event.isDefaultPrevented());
var url = $(this).attr(‘href’);
apprise(‘dosya yüklemesi devam ediyor iptal edilsinmi ?’, {‘verify’:true},
function(r) {
if(r) { window.location = url; }
});
}); });
aynen o şekilde yaptım ilk başta anlayamamıştım, ama Chrome çalışmadı hiç bir uyarıda vermiyor.
dialog penceresini değiştirsek, nasıl kullanabiliriz js bilgim fazla olmasada ilgi duymaktayım.
http://thrivingkings.com/read/Apprise-The-attractive-alert-alternative-for-jQuery
üzgünüm ne yapmak istediğinizi anlayamadım.
sayfa kapatılırken alert dialog penceresini nasıl değiştebiliriz diye sormuştum ama bunun mümkünatı olmadığını öğrendim.ama iç sayfa değişiminde kendime göre bir pencere ile uyarı verdireceğim, gmail tarzı . hızlı öğreniyorum.
evet mümkün değil.
İyi çalışmalar.
Aradığım birşeydi, çok teşekkürler.
tasarımımda bu yöntemi kullanıyorum ama ufak bir sıkıntı var
benim sistemimde sitede oturum açılıdıgında aktivite yüklü olmadıgı zaman tarayıcıdan bir aktivite yükleme butonu çıkıyor . bu butona tıklayıncada oturum kapanıyor.
site içindeki butonlarda sorun yok ama tarayıcıdan gelen yükle butonu benim kodlarım dışında oldgu için sorunu çözemedim. bu konuda ne yapabiliriz
Ajax request'in iki defa post edilmesini engellemek için jQuery(window).bind('beforeunload', function () { içerisinde function'a dışarıdan e parametresi verin. Sonrasında scope içerisinde e.preventDefault(); ile bir önceki click ve post eventlerini sonlandırabilirsiniz.