İçeriğe geç

JQuery Dropdown, checkbox, select change onay kutusu gösterme

Merhabalar,

Bugünkü konum dropdown ve/veya checkbox gibi “change” event’i (olayı) olan tüm html objelerde kullanılabilecek “DropDownList/ComboBox/Checkbox Selected Cancel Confirm”, yani içeriği/durumu değiştiğinde kısacası Change olayı tetiklendiğinde bu değişikliği onaya tabi yapma durumu.

Aslında konumuz ne kadar basit gibi görünse de mevcut kod deryasının içerisinde bazen hızlıca akıl edemediğimiz ve üzerine gereksiz yere bir ton düşünmek zorunda kalabildiğimiz bir konu.

Şimdi kodumuzu görelim;

var lastValue;

$(".changer").bind("click", function(e){lastValue = $(this).val(); }).bind("change", function(e){
changeConfirmation = confirm("Değişikliği yapmak istediğinize emin misiniz?");
if (changeConfirmation) {
// Onay alınması halinde değişiklik olacak ve bu alanda belirleyebileceğimiz ikinci bir olay tetiklenecek.
} else {
$(this).val(lastValue);
}
});

Burada aslında işleyiş oldukça basit ama kısaca özetlemek gerekirse;

  • Öncelikle lastValue isminde bir değişken tanımlıyoruz.
  • Ardından “.changer” class’ına sahip ilgili objemizin “click” özelliğinde bu değişkenimize mevcut değeri atayarak bir nevi eski datayı belleklemiş oluyor ki Confirmation NO olarak döner ise, yani son anda kullanıcı değişiklikten vazgeçer ise hemen alıp eski değeri yerine koyacağız.
  • ” confirm(“Değişikliği yapmak istediğinize emin misiniz?”);” şeklinde kullanıcıdan onay alıyoruz ve sonucunu yine bir değişkende tutuyoruz.
  • if (changeConfirmation) {” eğer kulanıcıya soracağımız emin misiniz sorusunun yanıtı evet ise hem değişikliğimiz başarıyla gerçekleşmiş oluyor, hem de istersen başka işlemler de yapabiliyoruz.
  • } else {” eğer kullanıcıya soracağımız emin misiniz sorusunun yanıtı HAYIR ise o zaman önceden değişkene atadığımız değeri alıp objemizin içeriğini eski haline getiriyoruz.

İşte aslında bu kadar basit bir işlem yaptık.

Diğer yazılarımda görüşmek üzere. Umarım işinize yaramıştır.

0 0 votes
Article Rating
Tarih:JQuery
Subscribe
Bildir
guest
0 Yorum
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x