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 »