gedex’s blog

Pada tulisan sebelumnya saya menjelaskan secara singkat event delegation dengan jQuery, maka kali ini akan saya berikan contoh penerapannya dalam aplikasi nyata yang pernah saya kerjakan. Pada contoh ini, saya menggunakan jQuery 1.3.2, jQuery UI (ui.core, ui.dialog, ui.draggable dan ui.resizeable). Dalam contoh ini terdapat ratusan div yang berfungsi sebagai cell, dimana setiap cell ini terasosiasi dialog div yang berisi informasi yang di load secara ajax. Div yang berperan sebagai dialog terinisialisasi dari event click setiap cell. Jadi ini akan menghemat jumlah elemen di dalam dokumen HTML.

Untuk melihat demonya silahkan klik disini. Sumber kodenya bisa di unduh di sini. Penerapan event delegasi terdapat di berkas box.js. Cukup perhatikan bagian kode menjelang baris akhir, khususnya dalam event handler click :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.click(function(e) {
        $target = $(e.target);
 
        if ( $target.hasClass('cell') ) {
            var offset = $target.offset();
 
            var targetID = $target.attr('id');
            var targetBlock = $target.attr('cellblock');
            var targetRow = $target.attr('cellrow');
            var targetCol = $target.attr('cellcol');
            var dialogID = 'dialog_' + targetID;
 
            $("body").prepend('<div class="cellPopup" id="' + dialogID + '" title="Cell Information">Loading...</div>');
 
             $("#" + dialogID).load("box_ajax.php?block=" + targetBlock  + "&row=" + targetRow + "&col=" + targetCol, {}, function(data){
                 if ( data ) {
                    $(this).html( data );
                 }
            });
 
            // set as UI dialog
            $("#" + dialogID).dialog({
                position: [offset.left, offset.top],
                bgiframe: true,
                modal: true,
                stack: false		
            });
 
        }
});

Properti e.target dari objek event merupakan element yang sedang ditangani oleh event handler click ini. Saya menjadikannya objek jQuery dengan $target = $(e.target); agar dapat menggunakan method dari jQuery. Kemudian saya memastikan bahwa target element tersebut memiliki class cell. Jika target yang diklik ini memiliki class cell, saya akan membuatkannya sebuah div dialog yang bisa didrag dan diresize dimana offset dialog akan berdekatan dengan posisi div.cell tersebut dan isi dari dialog tersebut merupakan respon dari ajax.

Suatu saat saya sedang bekerja dengan proyek yang banyak melibatkan binding event ke banyak element dinamis. Maksud saya adalah element yang tercipta dari interaksi user seperti dari penggunaan appendChild. Seperti diketahui bahwa saat dokumen HTML dan JavaScript nya selesai terunduh dari server, peraba dari pengguna akan membind event handler hanya ke element yang ada saat itu, yaitu element yang terdapat pada saat dokumen terunduh. Jadi event handler hanya akan dibind sekali pada satu waktu. Jika tercipta elemen baru hasil manipulasi DOM dari interaksi pengguna maka jangan heran jika elemen baru dengan class sama tidak ditangani oleh event handler yang sudah Anda tulis. Untuk lebih jelasnya mari lihat kode JavaScript (dengan jQuery) berikut:
Read the rest of this entry »

Dengan menggunakan firebug, kita dapat menyunting, men-debug, memonitor CSS, HTML dan JavaScript. Firebug juga menyediakan command line untuk mengeksekusi JavaScript on the fly. Dengan command line ini, kita dapat mengetes jQuery pada halaman web mana saja. Namun perlu dipastikan jQuery telah disertakan oleh halaman web tersebut. Jika tak mau dipusingkan dengan mengedit sumber berkasnya, Anda bisa memanfaatkan unduhan starter kit (dokumen HTML beserta CSS buat testing) dari jQuery, yaitu berkas html beserta jQuery yang sudah disertakan dalam berkasnya.
Read the rest of this entry »

jQuery ?

Apa itu jQuery? Dari situsnya “jQuery adalah sejenis pustaka JavaScript yang baru. jQuery adalah pustaka JavaScript yang cepat dan ringkas yang menyederhanakan traversing dokumen HTML, penanganan event, animasi, dan interaksi Ajax untuk mempercepat pengembangan web”. Mari kita liat contoh sederhana penggunaan jQuery:
Read the rest of this entry »

Saat ini saya mencoba beradaptasi dengan paradigma penulisan kode ARY (Always Repeat Yourself), kebalikan dari DRY . Fiuh, struktur berulang yang ditulis, membuat otak jenuh. Tapi, terkadang user menginginkan hasil yang cepat tanpa perduli sisi internal yang semerawut. Yang ada adalah merombak framework bekas yang sebenarnya tidak rapih struktur dan pola desainnya (bekas vendor terdahulu). Kebanyakan user menitikberatkan di sisi interface dalam validasi data, jadi client side scripting lebih banyak digunakan. Tapi lumayan buat tempat mengoprek JQuery. Kalau memungkinkan mungkin saya dan rekan lainnya akan merefactoring. Jika memang ada waktu untuk refactoring, paradigma MVC sepertinya mendekati DRY. Satu lagi adalah penulisan struktur (X)HTML yang valid agar tidak berjalan dalam mode quirk di peraba, karena saat ini kebanyakan template yang dikerjakan sebelumnya tidak menyertakan DTD. Untuk client side scripting juga masih belum memisahkan antara behavior dan struktur, jadi masih ada kode JQuery yang bercampur dengan kode Javascript vendor sebelumnya. Sebagian kecil module sudah mengkonsumsi data XML untuk dengan bantuan parsing JQuery. Yeah, nikmatilah paradigma koding yang ada