Fungsi Javascript Sederhana untuk Mengakses Jquery di CI

Pada tulisan yang lalu pernah saya bahas tentang pemanfaatan class PHP untuk akses Jquery, yakni menggunakan Pquery. Dalam perkembangannya, saya timbul keinginan untuk memakai Jquery tanpa bantuan Pquery. Agak sulit untuk saya yang tidak begitu paham Javascript. Berbekal sedikit pengetahuan tentang Function di Javascript, saya mencoba membuat fungsi sederhana untuk membangun situs keuangan Unnes, ya paling tidak mempercantik laaahh…
Sebenarnya plugin akan lebih efektif untuk hal ini. Tetapi itu terlalu sulit saat ini untuk saya, belum sempet belajar. Fungsi yang saya buat juga tidak lengkap, yang penting bisa untuk diterapkan di situs yang sedang saya buat ini. Langsung saja saya tuliskan disini.

function setSiteURL() {
    window.site = "http://www.your-site-url.com/index.php/";
}
function show(page,elemen){
    setSiteURL();
    $.ajax({
        url:""+site+""+page+"",
        beforeSend:function(response){
            $(elemen).slideUp("slow");
        },
        success: function(response){
            $(elemen).html(response);
            $(elemen).slideDown("slow");
        },
        dataType:"html"
        });
    return >false;
};

Function ini sangat sederhana bukan? Dia meminta dua parameter yakni page dan elemen. “Page” maksudnya adalah url (sebagian), kalau dalam CI adalah “controller/fungsi/segment1/dst”, dan elemen adalah id (atau class) dalam halaman HTML kita yang akan dijadikan “penampung” untuk respon dari server (berupa HTML). Pemanfaatannya adalah di parameter onclick di atribut link atau button kita, misalnya show(“home/page/4″,”#container”).
Link ini akan menuju controller home dan method page, dengan parameter segmen 4. Lalu, respon HTML akan ditampilkan di elemen DOM dengan ID container.

<div id = "container"> <!-- akan ditampilkan disini --> </div>

Catatan : Function setSiteURL berguna untuk mendeklarasikan variabel “site”, yaitu base_url situs kita.
Semoga bermanfaat.

Related posts:

1. Ajax File Upload (CodeIgniter dan JQuery)
2. Membuat Combobox Dinamis dengan CI dan Ajax
3. Integrasi Ajax di CodeIgniter
4. Referensi JQuery Plugin
5. Sharing Script CI 1.7.2 untuk Sistem Informasi

8 Comments

• 
  jeng na ra 26/10/2009 at 11:26 pm

  kasih demo donk pak, kalo cuma begini gak ngerti cara make nya
• 
  eko purnomo 01/05/2010 at 6:41 am

  saya ingin buat memasukkan halaman website yang menggunakan javascript dan swf seperti di link ini, http://www.flashmo.com/preview/flashmo_203_carousel_gallery . dalam view, alamat untuk memanggil file js dan swfnya sudah saya arahkan ke folder dimana file tersebut disimpan dengan kode seperti ini, <script type="text/javascript" src="picture/wfobject.js”> dan
  swfobject.embedSWF(“picture/flashmo_203_carousel.swf”, “flashmo_template”, “940″, “600″, “9.0.0″);
  . tp kok flashnya tidak muncul ya? dimanakah saya salah memanggilnya ? saya sangat butuh jawaban dari bro admin , terima kasih.
• 
  anggie 03/05/2010 at 11:22 am

  Cobalah untuk menggunakan URL lengkap, jangan berupa path saja (src-nya)
• 
  ci_aci 10/07/2010 at 4:06 pm

  bingung nih mulainya gimana???
• 
  Andika 16/09/2010 at 10:59 am

  iy nie ada contoh lengkap untuk penggunaannya ga???masi bingung nie…:(
• 
  awitara 17/02/2011 at 9:32 am

  WAH, TAMBAH PUSING,sebenarnya fungsi dari javacrip apa ya mas,,,,kalau tambah menubar pada header wordpress bisa gk, langkah nya baigamana ya,,,,,
• 
  anggie 17/02/2011 at 12:30 pm

  @awitara : Weleh…kok jadi ke wordpress mas…hehe…
  Javascript itu untuk mempercantik/memungkinkan interaksi yg lbh menarik antara user dengan aplikasi kita…klo tambah menubar di wordpress kan pake menu management/edit script langsung di header.php nya template wordpress Anda sudah cukup
• 
  lucky 04/04/2011 at 1:40 am

  maaf mas klo bisa kasih demo donk, please!!!! maklum newbie makasih