Kategoriler
JavaScript

Çakışan 2 jQuery Dosyasına Çözüm: jQuery.noConflict()

Bir süre önce başıma gelen jQuery çakışması olayını, nasıl çözdüğümü siz değerli takipçilerim ile paylaşmak istedim. Malum, web geliştirme ile uğraşan hemen herkesin başına gelebilecek ve belkide gelmiş bir olay bu. 

Mesela bir sayfada 2 farklı jQuery sürümü eklenmiş olabilir. (İhtiyaç duyacağımız jQuery eklentilerinden veya yapmak istediğimizi yapan fonksiyonların gerektirdiği farklı versiyonlardan dolayı.) Ya da çalışmakta olan sayfanıza include ettiğiniz bir sayfa da farklı bir jQuery sürümü veya aynı jQuery sürümü ekli olmuş olabilir; hiç fark etmez. Bu tarz durumlarda iki farklı jQuery dosyasında bulunan ve standart olarak kullanılan “$” fonksiyonları çakışmaktadır. Evet bu biraz saçma gelebilir ama durum bundan ibaret. Bizim yapmamız gereken iki dosyadan birindeki bu “$” fonksiyonlarının adını değiştirmek. Mesela “$x” yapmak gibi… Tabi ki tek tek bununla uğraşmayacağız, merak etmeyin. 🙂

jQuery.noConflict() bizim derdimize derman olacak fonksiyondur. Lafı çok uzatmadan hemen bu fonksiyonu kullanarak jQuery çakışmalarından nasıl kurtulacağımıza geçelim:

Öncelikle çakışma yaratacak jQuery kod bloğumuzun tepesine bir değişken oluşturuyoruz.

<script type="text/javascript">
	var jquery_calistir = $.noConflict(true);
</script>

jquery_calistir” adındaki değişkenimizi $.noConflict fonksiyonuna eşitliyor ve fonksiyonumuzun mantıksal değerini true olarak ayarlıyoruz. Akabinde bir fonksiyon oluşturup, “jquery_calistir” değişkenimizden geçirerek çalıştırıyoruz ve sonuç olarak karşımıza şöyle bir kod bloğu çıkıyor:

<script type="text/javascript">
	var jquery_calistir = $.noConflict(true);
	(function($){
		$(document).ready(function() {
			// Yazacağınız kodlar buraya...
		});
	})(jquery_calistir);
</script>

Hemen yukarıda gördüğünüz kod bloğu içerisinde, çakışan kodlarınızı “// Yazacağınız kodlar buraya…” yazan kısma yazın. Böylece otomatik olarak tüm “$” fonksiyonları değişecek ve artık çakışma olmayacaktır.

“Çakışan 2 jQuery Dosyasına Çözüm: jQuery.noConflict()” için 2 yanıt

Hocam merhaba, yukarıdaki verdiğiniz örneğin aynısı uyguladım. Ama bir sonuç alamadım yardımcı olursanız sevinirim.

Özellikle hazır temalar giydirilirken bu sıkıntıyla karşılaşılıyor. Sana helal olsun benim işimi fazlasıyla gördü…

Mehmet MADRAN için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.