Kategori arşivi: JQuery

$(document).ready() Nedir?

Ready fonksiyonu DOM yüklendikten sonra çalışacak events belirtmenizi sağlar.


 

 

 

 

 

 

 

 

 

 

 

Ready fonksiyonu en kısa açıklamasıyla DOM yüklendikten sonra çalışacak eventlarınızı belirtmenize yarar.

Bu bize nasıl bir yarar sağlar?

Bunu bir örnekle bunu açıklayalım. Bir HTML sayfası oluşturun ve içine şu kodları yazın.

Kırmızı yapmamasının sebebi DOM yüklenmeden önce sizin scriptinizin çalışmış olduğundan dolayı. Web tarayıcılarının html belgenizi yukarıdan aşağıya doğru okuduğunu biliyoruz. Bu sebeple okuma sırası şu şekilde olacaktır;

html > head > meta > title > script > script > body > h1

Kalın yerlere dikkat ederseniz önce bizim scriptimiz çalışmış oldu. Sonrasında h1 elementi yüklendi. Yani jQuery aslında olmayan bir h1 etiketini kırmızı yapmaya çalıştığı için sonuç başarısız oldu.

Peki bu script kodunu sayfanın altına alırsak ?

Evet bu şekilde çalıştırabildik. Örnek sayfamıza buradan ulaşabilirsiniz.

Şimdi gelelim ready() fonksiyonun işlevine. Yukarıda ki hiyerarşimizi terkar yazalım.

html > head > meta > title > script > script > body > h1

Document ready tam bu aşamada bizim imdadımıza koşuyor ve işlevi tam olarak şu şekilde gerçekleştiriyor.

html > head > meta > title > script(jquery load) > script > body > h1 > script

Gördüğünüz gibi jquery yükledikten sonra ki script bölümümüzü yüklemeden direk olarak DOM elementlerine yöneldi ve en son scriptimizi çalıştırdı. Şimdi ilk örneğimizi document ready kullanarak tekrar yazalım.

Evet script kodumuz hem üstte hemde h1 elementimiz kırmızı oldu. Canlı örnek için buradaki örnek sayfama gidebilirsiniz. Evet ready() fonksiyonumuzu öğrendiğimize inanıyorum. Ancak şöyle bir soru sorabileceğiniz aklıma geliyor.

Bu ready fonksiyonunun daha kısa kullanımı yok mu?

Ready fonksiyonunun iki adet kullanımı var. Uzun kullanımını yukarda gördük ancak tekrar edelim.

Kısa kullanımı ise şu şekilde;

Evet işte bu kadar. Umarım yararlı bir döküman olmuştur.

Facebooktwitterredditpinterestlinkedin

Html.BeginForm’u Post Sonrasında Js ve JQuery İşlemleri

Üzerinde çalıştığım projemde dosya yükleme eklemem gerekiyordu. Bütün view’lerimde Ajax.BeginForm ile post ediyordum ve post sonrası js işlemleri için parametre olak OnSuccess kullanıyordum. Upload işlemini Html.BeginForm ile yapmak zorunda kalınca OnSuccess’den mahrum kaldım.

Html.BeginForm ile post sonrasında js kütüphanelerimi aşağıdaki gibi bir yöntemle çalıştırdım 🙂

JS Kütüphanesi:

Controller.cs:

Facebooktwitterredditpinterestlinkedin