Etiket arşivi: ajax

FCKeditor ile AJAX Problemi ve Çözümü

Published / by Uğur Özşahin / Leave a Comment

    Hata : FCKeditor açık kaynak kodlu bir WYSIWYG metin editörü ve Ajax da bilindiği üzere Web 2.0 ’ın getirdiği işlevselliklerden sadece biri. Fakat FCKeditor ile hazırladığınız bir formu Ajax ile submit etmek istediğinizde FCKeditor ’e yazmış olduğunuz koca bir metnin submit işlemi içerisinde yer almadığını göreceksiniz.

    Bu sorunla ilk karşılaşmam doğal olarak yazdığım scriptlere Ajax uygulamalarını dahil etmeye çalışırken gerçekleşti. jQuery kütüphanesine alışmam ve bir çok işlemi benim için kolaylaştırması nedeniyle, bende bir an önce bana ait olan bazı sitelere Ajax avantajını entegre etmeye çalıştım. Tabi başta herşey çok güzeldi. İstediğim zaman açılıp kapanmasını sağladığım alanlar, sayfa değiştirmek zorunda kalmadan yaptığım submit işlemleri gibi daha bir çok etken  Ajax ile uğraşmamın ne kadar haklı olduğunu  bana ispatlar nitelikteydi. İnternetin benimsediği en önemli kavramlardan birinin hız olduğu düşünülürse, Ajax bu hızı sağlamak açısından biçilmiş kaftan sanırım. Fakat ajax ile uğraşırken de bazı küçük problemler ortaya çıkabilmekte.

    Uyarı : Bu arada belirtmem gereken nokta yaşadığım problem, FCKeditor 2.4.3  ve önceki versiyonlarında gerçekleşmektedir. Bundan sonra çıkacak olan versiyonlarda sorun çözülmüş olabilir belirtmek isterim.

    Evet sonunda bir sıkıntı ile karşılaştım FCKeditor ’ün de içinde bulunduğu bir formu submit etmeye çalıştığımda FCKeditör alanı dışındaki tüm alanların veritabanına yazıldığını gördüm. Eğer böyle bir editör kullanıyorsanız zengin metin editörü kavramının, zengin bileşenini muhtemelen maksimum verimle kullanmak istiyorsunuzdur. Tabi yazdığınız onca zengin satır bu tip bir durumda boşa gider. Bende bunun üzerine farklı bir metin editörü aramaya koyuldum. Bir iki denemeden sonra da vazgeçtim. Çünkü diğer editörlerde aynı işlevselliği yakalayamamıştım. Artık soruna odaklanma vakti gelmişti küçük bir araştırma yaptım ve sıkıntının FCKeditor ’ün submit işlemine kadar kendine ait alanı güncellemediğini anladım.

    Çözüm : Bu sorunla ilgili de türkçe bir döküman bulamadığımdan biraz ingilizce araştırma yaptım. Karşıma almanca bir site çıktı . Yazılı dökümandan birşey anlamasamda yazan arkadaşın soruna ilişkin çözümünde verdiği kodların ne yapmak istediğini anlamıştım. Bunun üzerine hemen kodları kendi uygulamalarıma adapte ettim.

    Artık kodlar ve nasıl uygulanacakları konusunda birşeyler yapmanın zamanı geldi sanırım.

   ilk yapılması gereken aşağıda verdiğim sınıf betiğini javascript kodlarınız arasına yerleştirmek.

// Güncellemek için gereken sınıfımızı oluşturuyoruz
function MyupdateClass()
{
        this.updateEditorFormValue = function()
        {
                //Bu bölümde tüm FCKeditor alanlarının güncellenmesini sağlıyoruz.
                for ( i = 0; i < parent.frames.length; ++i )
                        if ( parent.frames[i].FCK )
                                parent.frames[i].FCK.updateLinkedField();
        }
}
// Yeni bir sınıf objesi oluşturuyoruz.
var MyObject= new MyupdateClass();

    Bu kodları javascript kodlarımız arasına eklediğimizden emin olduktan sonra yapmamız gereken tek şey ajax ile hazırlamış olduğumuz form submit fonsiyonunun öncesinde güncelleme fonksiyonumuzu çağırmak olacaktır.

MyObject.updateEditorFormValue();

Örnek bir kod bloğu vermem gerekirse hazırlamış olduğumuz FCKeditor ’lü form kodumuz :

<form … onSubmit="MyObject.updateEditorFormValue(); Ajax.Collect(); return false;">

bu şekilde başlamalıdır. Tabi düzenlemeniz gereken yerlerin varlığından bahsetmeme gerek yok sanırım. İyi çalışmalar dilerim, umarım aynı sorunu yaşayanlara yardımcı olabilmişimdir.

jQuery ile Form Serialize Fonksiyonu

Published / by Uğur Özşahin / Leave a Comment

jQuery yeni yeni öğrenmeye başladığım bir framework. jQuery nin tam olarak ne olduğundan bahsedecek olursak kısaca, en çok kullanılan belli başlı ajax fonksiyonlarını içinde barındıran bir kütüphane olduğunu söylemek yanlış olmayacaktır sanırım. Ajax ile çok uzun zaman önce tanışmama ve küçük çaplı uygulamalar yazmama rağmen hiç bir zaman yeterince özen göstermediğimin farkına bir kaç gün önce vardım. Küçük bir araştırma sonucu kullanışlı olabiliceğini düşündüğüm bir framework ile karşılaştım (jQuery). Browser farklılıklarından kaynaklanan sorunlar yüzünden javascript dilini bir türlü sevememiştim. Fakat Ajax ’ ın kullanışlılığının ve kolaylığının da tartışılmaz olduğunu düşünenlerdenim. Dolayısı ile browser farklılıklarından dolayı çıkabilecek sorunlarla karşı karşıya kalmak istemiyor ve bir an önce kullanışlı ajax uygulamaları geliştirmek istiyorsanız eğer, bu framework çok işinize yarayabilir.

Yeni öğrenmeye ve uygulamaya başladığım jQuery de, başlar başlamaz karşılaştığım en önemli sorunu ve çözümünü de burada paylaşmaya karar verdim. Ajax ile ilgilenenler bileceklerdir. Prototype.js kütüphanesinin kullanışlı fonksiyonlarından biri olan serialize(), jQuery de de karşımıza çıkmakta. Fakat sorun bu fonksiyonu, sayfalarımızda kullandığımız formları javascript ile sunucuya gönderirken prototype ’ taki kadar kolay kullanamamamız. İşte bu sorunun çözümünü (aslında pek sorun sayılmaz) yazının devamında okuyabilirsiniz.

Öncelikle jQuery Framework ü buradan indirebilirsiniz. İki farklı sürümünün olduğunu belirtmeliyim. Birisi sıkıştırılmış sürüm ki uygulamalarınızı yazarken bu sürümünü kullanmanızı öneririm. Diğer sürüm ise sıkıştırılmamış sürümüdür. Bu sürümde kodları rahatlıkla okuyabilir, değiştirebilir ve kullanabilirsiniz. Ancak kişisel uygulamalarınızda ilk sayfa yüklemelerinin biraz daha uzun sürmesine neden olabileceğini unutmamalısınız.

jQuery nin farkına vardığımda ülkemizde de jQuery ile ilgilenen birçok insan olduğunu ve bir mail grubu oluşturduklarını öğrendim, hemen üye oldum. Hatta bahsettiğim sorunu orada da paylaştım. Her şeye rağmen grup üye sayısının çok fazla olmaması dolayısı ile geçici olarak yeterli dayanışmayı sağlayamadık. Sonunda sorunu kendi yöntemlerimle çözdüm ve aşağıda örneği ile birlikte açıklıyorum.

Önce yapmak istediğim şeyin ne olduğunu belirteyim, amacım herhangi bir sayfada kullanılacak olan bir form oluşturmak ve formdaki verileri istediğim yere submit ettikten sonra sonucu formun olduğu sayfaya yansıtmak.

İstediğim bilgileri get metodu ile gönderebilmek için aşağıdaki javascript koduna ihtiyacımız var.


<script type=”text/javascript”>
$(document).ready(function(){
$(’#jq’).submit(function() {
var form = jQuery(’#jq’);
q = form.formSerialize();
$.ajax({
type: “GET”,
url: “jquery_form.asp”,
data: q,
success: function(cevap) { $(“#icerik”).html(cevap); },
dataType: “html”
});
});
});
</script>

Burada bilinmesi gereken önemli fark, serialize fonksiyonunu prototype.js de Form.serialize() şeklinde çağırarak direk sonuç alabilmemize rağmen jQuery de bu işlemi bir plugin yardımı ile yapabiliyorsunuz. jQuery için yazılmış bu plugini uygulamamıza ekledikten sonra içerisinde bulunan formSerialize() fonksiyonunu kullanıyoruz. jQuery Form plugini ni fazla inceleme fırsatım olmadığı için şu an tam olarak yorum yapamıyorum. Sonraki yazılarımda bu pluginden daha ayrıntılı bahsetmeyi düşünüyorum. Bu jQuery Form Plugin inini buradan indirebilirsiniz.

Yukarıda ki koddan biraz bahsedecek olursak, “jq” id sine sahip formumuzun submit fonksiyonunda; formu jquery_form.asp sayfasına get metodu ile subbmit etmesini ve jquery_form.asp sayfasından dönen verinin, sayfamızda bulunan “icerik” id li div tagına yazılmasını sağlıyoruz.

Bu fonksiyonun yararından bahsedecek olursak, öncelikle sayfalarınızda kullandığınız formlarda ziyaretçilerinizin daha fazla zaman kaybetmemelerini sağlayacaktır. Örnek olarak bir yorum uygulamasında kullanıcılarınız yeni bir sayfaya yönlendirilmeden aynı sayfa içerisinde çok hızlı bir şekilde yorum yapma fırsatı bulacaklardır. Hele bir de ajax uygulamalarının vazgeçilmezi loading (Yükleniyor) grafiklerini de kod içerisine dahil ederseniz çok zarif bir uygulama elde edebilirsiniz.

 

Aşağıdaki linkten de projeyi sorunsuz olarak indirebilir ve localhostta deneyebilirsiniz. İndirdikleriniz asp ile ve çok basit bir şekilde kodlanmıştır. Rahatlıkla Php yada başka bir dile dönüştürebilirsiniz.