Skip to content

jQuery Easyui ile Form Onchange Problemi

jQuery EasyUI kullananlar yaşamıştır diye düşünüyorum. Öncelikle belirtmekte fayda var, bu makale 2015 yılına ait, en son jQuery EasyUI üzerinde denenmemiştir. jQuery easyUI ile textbox, datebox, numberbox ve combobox fonksiyonlarına sahibiz. Bu fonksiyonlar inputlara bazı modern özellikler ekliyor. Olay şurada başlıyor, inputlarımızı EasyUI ile daha işlevsel hale getirdiğimizde form onchange olayı yakalanmıyor. Yani şöyle ki aşağıdaki gibi başlayan bir formumuz olduğunu düşünün ve form inputlarında değişiklik yaptığımızda degisimYapildi() fonksiyonunun çalışmasını istiyoruz. Fakat çalışmıyor! İşte çözümü bu makalede!

<form action="#" id="trkodlamaForm" onChange="degisimYapildi()">

jQuery EasyUI inputları bu onchange eventini yakalayamıyor.. onChange özelliğinden faydalanmak için jQuery EasyUI kütüphanemizi HTML’inize eklediğiniz satırdan sonra aşağıdaki JavaScript kodunu eklerseniz probleminiz çözülecektir:

(function($){
	var numberbox = $.fn.numberbox.defaults.onChange;
	$.fn.numberbox.defaults.onChange = function(newValue, oldValue){
		$(this).closest('form').trigger('change');
		numberbox.call(this, newValue, oldValue);
	};
	var combobox = $.fn.combobox.defaults.onChange;
	$.fn.combobox.defaults.onChange = function(newValue, oldValue){
		$(this).closest('form').trigger('change');
		combobox.call(this, newValue, oldValue);
	};
	var textbox = $.fn.textbox.defaults.onChange;
	$.fn.textbox.defaults.onChange = function(newValue, oldValue){
		$(this).closest('form').trigger('change');
		textbox.call(this, newValue, oldValue);
	};
	var datebox = $.fn.datebox.defaults.onChange;
	$.fn.datebox.defaults.onChange = function(newValue, oldValue){
		$(this).closest('form').trigger('change');
		datebox.call(this, newValue, oldValue);
	};

})(jQuery);

Umarım faydalı olur, iyi geceler,

TR Kodlama GitHub'da!

TR Kodlama'da yer alan makaleleri GitHub üzerinden düzenleyebileceğinizi biliyor muyudunuz? Harika değil mi? Bu makale ile ilgili düzenleme yapmak isterseniz aşağıdaki butona tıklayınız!

GitHub'da Görüntüle ve Düzenle!