[Contoh] Memanfaatkan Fungsi .append() pada JQuery untuk Aplikasi Web

Diantara anda mungkin ada yang sering memanfaatkan web chat seperti pada Facebook, GTalk, dan lain sebagainya. Mungkin juga kita sering melihat fungsi komentar yang berjalan real time pada Facebook, Twitter, dan lain sebagainya. Dimana ketika kita melakukan POST komentar atau chat, halaman web tidak perlu melakukan reloading secara keseluruhan. Kita bisa membandingkan fungsi seperti yang ada pada situs detik, dimana setiapkali komentar, halaman akan melakukan refresh secara keseluruhan, hal ini akan sangat memberatkan client terutama yang memiliki bandwidth internet kurang memadai. Sudah seharusnya halaman yang diload hanya pada yang berubah saja. Jika kita melakukan post, ya seharusnya yang berubah hanyalah pada perubahan post itu saja.

Untuk melakukan itu, kita bisa memanfaatkan fungsional JQuery .append() untuk melakukannya. .append() berfungsi untuk menambahkan sebuah elemen, dengan isi seperti parameter yang akan ditunjukkan oleh fungsi tersebut. Sebagai contoh saya memiliki script seperti demikian :

Meskipun elemen dengan ID content adalah kosong, namun dengan fungsi javascript JQuery .append(), Div tersebut akan memiliki isi seperti yang diisikan oleh script tersebut. Hal ini sebenarnya mengambil fungsi dari fungsi utama javascript seperti yang pernah kita bahas di posting lalu tentang DOM.

FUNGSI .append() untuk web chat.
Saya akan menggabungkan dua tema posting yang lalu, yaitu DOM yang telah terwakili dengan fungsi JQuery disini dan Fungsi FORM yang ditambahkan tanpa perlu melakukan reloading sebuah halaman web. Namun, ingat, bahwa saya belum menambahkan fungsional database. Jadi masih bersifat contoh client side. Scriptnya kira-kira adalah seperti ini:

chat.html

Script ke dua adalah berupa javascript yang disimpan sebagai script.js, dan berisi sebagai berikut:

Tugas utama dari .append() adalah menambahkan sebuah isi dari fungsi, menjadi elemen tambahan didalam div yang di dalamnya. Dalam kasus ini, saya menambahkan kata

Jangan lupa, selalu menggunakan source jquery. Sebagai perhatian bahwa tidak semua browser bisa melakukan ini, terutama Internet Explorer. Untuk Mobile Browser sebagian bisa melakukannya.. Anda bisa mengklik demo ataupun mendownload filenya. Untuk tutorial CHAT yang terintegrasi database, tunggu posting selanjutnya.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">