Kısa yazmayı beceremeyen biri olarak kendimi zorlayacağım ve bu yazıyı çoook kısa tutmaya çalışacağım. Öncelikle belirteyim ki front-end uzmanı değilim. Kendi projem için Vue-CLI ile oluşturdupum bir arayüz hazırlıyorum. Merak edenler için backend olarak Laravel kullanıyorum. Projede Vue (v3), Vuex (v4) ve Vee-Validate (v4) kullanıyorum. Vee dökümanını incelediğimde form gönderilirken tetiklenen “isSubmitting” state’i sunduğunu gördüm. Tam da aradığım bir şeydi. Böylece kendim ayrıca bir state tutmama gerek kalmıyordu ki öncesinde hep öyle yapıyordum. Dökümandaki örnek şu şekildeydi; Satır 17 olan kısımda API çağrımızı yapabiliyoruz ve default false olan isSubmitting state’i bu esnada true oluyor. Benim kodum şu şekildeydi: Görüldüğü üzere…
Kategori: Javascript
VueJS ile bir iki haftada bitirmek üzere başladığım bir yan projemde Bootstrap-vue kullanıyorum. Burada karşılaştığım bir validation sorununu nasıl aştığımı kısaca belirteyim. Sorun şu; formda iki alan zorunlu iken diğer üç alan zorunlu değil. Formdaki submit butonuna tıklanınca bütün form validate ediliyor ve hatalı alanlar kırmızı ile, hata olmayanlar yeşil ile belirtiliyor. İşte bu yeşil olanlar zaten zorunlu olmayan alanlar. Bunların yeşil görünmelerini istemiyordum. Bootstrap dökümanında yazdığı üzere form elemanlarını validate edebilmek için başlangıçta bunları kapsayan bir öğeye (mesela form öğesine) .novalidate class’ı eklemek gerekiyor. Validate işlemi olunca bu öğe yakalanıp buna .was-validated class’ı ekleniyor ve bunun altındaki bütün alanlar…
Kısa bir süredir VueJS kullanıyorum. Karşılaştığım ve çözebildiğim bazı sorunları buradan paylaşacağım. Eğer daha iyi bir çözümünüz varsa lütfen yorum olarak yazın, seve seve kabul ederim. Malum; VueJS’de props (properties), data ve computed başlıkları altında üç tip veri bulunuyor. Bunlarda props altında tanımlananlar component’i çağırırken setleyebildiğimiz ve içerde değiştirmeye kalktığımızda hata aldığımız veri yöntemidir. Yani bunlar bir kereye mahsus setlenmeli ve daha ellenmemeli. Nedenini dökümantasyonunda anlatmış ama benim ingilizcem ancak anlamaya yetiyor, ne dediğini siz buyurun şurdan okuyun: In some cases, we may need “two-way binding” for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components…
Bir süredir üzerinde çalıştığım klasik HTML tabloları MS Excel’deki gibi Pivot Table mantığında işleyebilecek bir mini javascript projesi giderek daha karmaşık hale gelmeye başladı. Yolun başında bağımsız fonksiyonlarla kullanıyorduk ama jQuery ile o kadar iç içe idi ki en iyisi bir jQuery plugini olsun dedik. Arayüzünde Twitter Bootstrap kullandığımız projemizi github hesabımızdan takip edebilirsiniz. Henüz tamamlanmadı ama kısa sürede neticeye varmayı ümit ediyoruz. Projede başta Jquery ve Twitter Bootstrap olmak üzere pek çok javascript plugin kullandık. Bunlardan biri bu yazının konusu: LINQ. LINQ’i, javascript tabanlı bir data sorgulama aracı olarak tarif edebiliriz. JSON tabanlı veriyi istemci üzerinde istediğini kriterlere göre…
Web sayfanızda File input öğresi yerine bir buton veya link ile dosya diyalog penceresini açmak istediğinizde ilk yaptığımız şey “display:none” diyerek mevcut file input nesnesini gizlemektir. İşte chrome da tam buna gıcık oluyormuş. O nesne görünmez olduğu için jquery ile $(“#file_input_nesnesi”).trigger(“click”) dediğinizde bir tepki vermiyor. Yapılacak iş file input nesnesini başka bir şekilde gizlemek. Mesela “position:absolute; top:-999px; left:-999px” şeklinde stil vererek gizlediğimizde sorun kalmıyor..
Bir mikroproje için lazım olan Jcrop (görselleri kesmeye yaran güzel bir jQuery eklentisi) düzgün çalışmayınca mutlaka başka bir Javascript ile ya da CSS ile çakıştı diye düşündüm. Yanılmamışım, sayfadaki diğer Javascript ve css dosyaları sırayla kaldırdığımda sorunun projede kullandığım Twitter Bootstrap css dosyaları ile çakışmasından kaynaklandığını farkettim. Her ikisi de çok kullanılan kaynaklar olduğu için kesin bu problem başkalarının da karşısına çıkmıştır ve bir çözüm üretmişlerdir diyerek Googling yaptım ve bir iki çözümü denedikten sonra sorunumu şu adresteki düzelme ile hallettim. Jquery.Jcrop.css dosyanıza şu düzeltiyi yaparsanız, ya da bunu en son yüklenecek şekilde ayrı bir css’e koyarsanız sorun düzeliyor: /* Fix for using with Bootstrap, from Twitter */…
jQuery’yi kim icad ettiyse Allahü Teala hidayet versin diye sık sık dua ediyorum. 10 sene önce patronum “table satırları arasında dolaşırken zemin rengi illa değişsin” diye zorlamasaydı Javascript’e hiç yaklaşmamaya karar vermiştim. Çünkü browserlar arasında (o zamanlar Netscape ve Internet Explorer popülerdi) aşırı bir uyuşmazlık vardı. Birinde çalışan diğerinde çalışmıyordu. Bu sorunlar belki hala var ama jQuery gibi framework’ler sayesinde bu sorunlarla uğraşmak zorunda kalmıyoruz. Javascript web sitelerini dinamik hale getirmek için elimizdeki neredeyse tek aracımız (Flash’ı saymazsak yani). Bu aracı kullanmak normalde çok zor. Sayfadaki bir elemanı seçmek için document.getElementById(id) gibi uzun ve sıkıcı bir fonksiyonu var mesela. jQuery…