Jquery Val() Fonksiyonunu Override Etme

Büyük projelerde karşımıza çıkabilecek en büyük zaman kaybı, yazılımcıların veya takım liderlerinin altyapıyı oluştururken, problem olarak karşımıza çıkacak ihtimalleri atlamasıdır. Yakın zamanda karşıma çıkan böyle bir problemi, çok kısa bir zamanda, Javascript’in esnekliği ile çözdüm.

Combobox üzerinde val() fonksiyonunu çağırdığımızda, change metodunu tetiklememesi, problemin kaynağını oluşturuyordu.

Ve binlerce satırlık kodların arasında, boğulmak yerine, merkezin kaynağına inerek problemimi çözebileceğimi düşündüm.

Öncelikle problemi anlamanız için küçük bir örnek yapalım.

Örneğin;

<select>
<option value="1">Java</option>
<option value="2">C#</option>
<option value="3">Php</option>
<option value="4">Python</option>
</select>
$(document).ready(function(){
    $("#cmbDiller").change(function() {
        alert($(this).val());
    })
})

Yukarıdaki kod yapması gereken işlemleri başarıyla gerçekleştiriyor. Yani ComboBox üzerinde bir değişiklik yapıldığında value değerini alert fonksiyonu ile gösteriyor. Peki ekranın load anında veya buton tıklandığında, ComboBox üzerindeki seçeneklerden Php olanı ekranda getirmek istersem ve değişiklik olduğu içinde change metodunun çağrılmasını istersem ne yapmalıyım ? Aslında bununda çok kolay bir yöntemi var.

    $("#cmbDiller").val("3");

Demek yeterli olacaktır. Yani Value değeri 3 olan nesneyi aktif yap.

Örneği çalıştırırsanız,  ComboBox üzerinde index değiştiği halde, change metodu tetiklenmediğini görürsünüz. Change metodunun tetiklenebilmesi için, fare ile değeri değiştirmemiz gerekiyor.

Araştırmalarım sonucunda böyle bir şeyin olmadığını bunun yerine;

    $("#cmbDiller").val("3").change();

yukarıdaki şekilde kullanmam gerektiğini anladım.

Fakat o kadar kodu tekrardan bu hale getirmek, zaman kaybına ve hatalara sebep olabilirdi.

Bende Jquery içinde ki val() fonksiyonunu override edip, kendime göre tekrar yazmaya karar verdim.

var orjinalValFonksiyonu = this.orjinalValFonksiyonu = $.fn.val;
$.fn.val = function (value) {
    if (typeof value == 'undefined') {
        return orjinalValFonksiyonu.call(this);
    }
    else {
        return orjinalValFonksiyonu.call(this, value).change();
    }
};

Bu problemi ülke,il,ilçe,semt gibi birbirine bağlı ComboBox’larda yaşama ihtimaliniz var.

Elbette bu problemi $(‘nesne’).val(‘id’).change() ile çözülebilir.

Ama anlattığım gibi alternatif bir yöntemle de problemi halledebilirsiniz.

This entry was posted in Dersler, Javascript, Jquery, Kısa Kısa Yararlı and tagged , . Bookmark the permalink.

One Response to Jquery Val() Fonksiyonunu Override Etme

  1. Mesut Nohutcu says:

    Gerçekten harika bir paylaşım sık kullananlara ekledim ki bu konu lazım olduğunda ulaşayım. Yürekten Teşekkürler

Leave a Reply

Your email address will not be published. Required fields are marked *