Script Ajax Sederhana menggunakan jQuery

07 May 2008 144,880 views

AJAX adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dipanggil ulang hanya untuk mengganti sebagian kecil dari isi halaman.

Terimakasih kepada framework jQuery, proses development ajax bisa menjadi lebih mudah.
Salah satu fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), yang memiliki 3 buah parameter sbb:

load(url, params, callback)

keterangan:

  • url (String): URL dari file html yang akan di load
  • params (Object): Data yang akan dikirimkan ke server (optional)
  • callback (Function): Fungsi yang akan dijalankan ketika data berhasil di load (optional)


Contoh penggunaan pada sebuah link:

1
2
3
4
5
$(document).ready(function() {
	$('#link').click(function() {
		$('#container').load('content.php');
	});
});

keterangan:

  • link adalah id dari link/tombol yang akan diklik
  • container adalah id dari element yg akan memuat isi dari script content.php

Contoh penggunaan yang lebih dinamis (dengan mengambil nilai dari attribute href) :
Misalnya ada sekumpulan link di dalam sebuah div

1
2
3
4
5
6
7
8
<div id="menu">
	<ul>
		<li><a href="content.php?id=1">Menu 1</a></li>
		<li><a href="content.php?id=2">Menu 2</a></li>
		<li><a href="content.php?id=3">Menu 3</a></li>
		<li><a href="content.php?id=4">Menu 4</a></li>
	</ul>
</div>

Tanpa penambahan script, link-link tersebut akan diproses sebagai link biasa.
Supaya semua link-link tersebut bisa diproses dengan ajax, tambahkan script sbb:

1
2
3
4
5
6
7
$(document).ready(function() {
	$('#menu a').click(function() {
		var url = $(this).attr('href');
		$('#container').load(url);
		return false;
	});
});

Untuk lebih jelasnya silakan lihat demo:
Demo AJAX

Anda bisa mendownload source code nya di sini:
Download jQuery AJAX

187 Comments

  1. black_id says:

    gilaaa… ko bisa yak keluar isinya sendiri.. hiiiiii… atut ada setannya neh di belakang layar… ngibrit dlu ah… :p

  2. wekadesign says:

    Kalo ga ingin update JQuery nya secara manual… kita bisa juga lo ambil jquerynya langsung dari servernya :D

  3. gawibowo says:

    oh iya ya.. ada juga cara kyk gitu
    sepertinya lebih mudah…daripada harus update2 terus
    sungguh luar biasa ide anda
    sip sip sip sip sip sip sip sip sip sip sip sip .. :D

  4. wekadesign says:

    Tapi untuk SEO bagaimana neh… terhandle juga tidak?? Ato emang lebih ditujukan pada backoffice page??

  5. gawibowo says:

    setahuku sih content yang diambil oleh script ajax tidak bisa terindex oleh search engine..
    jadi ya script yang masih sederhana ini tidak SEO friendly.. :)

  6. Deni says:

    Mantap boss :D

  7. Rius says:

    Mas, wibowo,
    kalo di dalem content.php itu ada link ato <a href gimana nampilinnya lagi ?

    please help :)

    Thanks

  8. gawibowo says:

    file content.php itu isinya cuma berupa content saja yg akan ditampilkan sewaktu kita klik link di atasnya (link 1, link 2,… dst)
    jadi ya tidak ada masalah kalau di dlm content tsb ada link (a href), nanti akan muncul sebagai link biasa

  9. cheebhodh says:

    Hm… bagus juga tuh
    Ngomong2 lebih bagus mana ya Mootools dengan jQuery??? Aq jadi bingung nih

  10. gawibowo says:

    jQuery dan MooTools, masing-masing memiliki kelebihannya sendiri. Kalau memang anda bingung dan harus memilih di antara keduanya, pilih saja yang paling cocok untuk kebutuhan anda, dan tentunya yang paling mudah untuk dipelajari :)

  11. [...] pada artikel sebelumnya saya sudah membahas tentang cara menampilkan halaman menggunakan AJAX (dengan fungsi load pada [...]

  12. Oka Dayendra says:

    gawibowo
    16 May 2008 at 09:15
    setahuku sih content yang diambil oleh script ajax tidak bisa terindex oleh search engine..
    jadi ya script yang masih sederhana ini tidak SEO friendly..

    #####################
    Untuk SEO memang ga bisa tapi bisa diakali dari URL, jadi tetap bisa terindex content yg diambil dengan script ajax.
    Kita buat 2 bagian, bagian statis dan dinamis.
    Bagian dinamis itu yang saat request data oleh AJAX, sedangkan bagian statis nya kita buat URL untuk content yang diambil dgn AJAX tadi, jadi tetap bisa di index oleh search engine. Kunjungi aja http://www.dayendra.web.id atau http://www.tienslife.com untuk lihat demo nya

  13. gawibowo says:

    @Oka Dayendra:
    Terimakasih atas masukannya. Saya sudah mengupdate script di demo saya, sekarang sudah menggunakan link biasa (misalnya a href=”content.php”, bukan link ke fungsi javascript.
    Jadi seandainya javascript pada browser mati, link nya tetap bisa berjalan.
    Mungkin yang anda maksud adalah seperti ini?

  14. Indra says:

    Rius

    14 Jul 2008 at 13:15

    Mas, wibowo,
    kalo di dalem content.php itu ada link ato <a href gimana nampilinnya lagi ?

    gawibowo

    14 Jul 2008 at 14:09

    file content.php itu isinya cuma berupa content saja yg akan ditampilkan sewaktu kita klik link di atasnya (link 1, link 2,… dst)
    jadi ya tidak ada masalah kalau di dlm content tsb ada link (a href), nanti akan muncul sebagai link biasa

    ——-

    Kalo nampilinnya bukan sebagai link biasa tapi seperti link yang di file utama gimana ya mas? (Dengan kata lain di file content.php terdapat link yang jika di klik munculnya ya dihalaman utama dengan prilaku sama dengan file content.php ketika link di halaman utama kita klik)

    Terimakasih

  15. gawibowo says:

    @Indra:
    bisa saja mas, coba saja masukkan link seperti ini di dalam file content.php :

    <a href="content.php?id=4" onclick="$('#container').load($(this).attr('href'));return false;" rel="nofollow">Tes Menu 4</a>

    rel=”nofollow” nya bisa diabaikan (itu otomatis dari wordpress)

  16. orakanggo says:

    kalo pake POST gmn ya mas?

  17. gawibowo says:

    @orakanggo:
    secara default fungsi load() akan melakukan request dengan metode GET, tapi dengan mengisi parameter yang kedua bisa kita ganti menggunakan POST, contohnya sbb:

    $("#container").load("content.php", {type: "POST", data: "nama=asdf&alamat=zxczv"});
    • angel says:

      kalo yg di parameter ada tulisan data: “nama=asdf&alamat=zxczv”} itu maksudnya apa?? terus aklo contoh pake callback functionnya gmn ya??help me please….very2 need that..thx

      • gawibowo says:

        data tsb digunakan pada file content.php untuk diproses..
        untuk mengambil data tsb di php menggunakan variable $_POST (atau $_GET jika type nya GET)

  18. atoeyz says:

    sediain dunk link buat donlot nya prasaan demo mulu adanya :P

  19. gawibowo says:

    @atoeyz:
    link downloadnya sudah saya sediakan.
    silakan download sepuasnya…
    :D

  20. AJ. says:

    mas, untuk update sebuah (atau lebih) elemen (div/span), untuk menampilkan sebuah statistik yang selalu berubah, ter-update secara realtime gmana kodenya?

    nuhun :D

  21. gawibowo says:

    @AJ.:
    AJAX autoupdate: mungkin bisa dengan script seperti ini:

    1
    2
    3
    4
    
    function updateStatistik() {
    	$('#stat').load('statistik.php');
    }
    setInterval(updateStatistik, 10000);

    10000 : contentnya akan diupdate setiap 10000 ms atau 10 detik
    silakan diganti seperlunya

  22. AJ. says:

    mantep banget…

    thanks banyak

  23. AJ. says:

    mas, mo nanya lagi…

    ane punya halaman website (template seperti smarty), di dalam template tersebut ada variable seperti:
    $(uptime)

    nah, variable $(uptime) tersebut cuman bisa ter-update kalau halaman website di-refresh, sementara saya tidak mungkin memanggil variable melalui fungsi load(), karena ini variable template.

    gmana penggunaannya di jQuery supaya variable tersebut bisa ter-update tanpa refresh halaman.

    maaf nanya mulu, and thanks.

  24. gawibowo says:

    kalau gini gimana:
    isi dari variabel $uptime tsb (mungkin berupa fungsi yang menghasilkan uptime) dipisah ke dalam file tersendiri misalnya uptime.php
    kemudian file tsb dipanggil lewat fungsi load(‘uptime.php’)
    :D

  25. AJ. says:

    hehehe, metode itu sudah ane coba dan hasilnya variable kosong, dan ternyata variable $(uptime) tersebut hanya bisa ditampilkan oleh halaman template khusus

    ane sih maklum saja, soalnya core program webnya saja ane gak tau itu pake PHP, CGI, Perl atau lainnya, soalnya program embedded, jadi terbatas untuk utak-atik

    btw, thanks atas reply-nya :D

  26. gawibowo says:

    atau gini mungkin juga bisa mas:
    anda panggil saja halaman tersebut lagi lewat fungsi load(), tapi tidak perlu memuat seluruh halamannya, hanya sebagian elemennya saja
    misalnya itu halaman index.php :

    1
    
    load('index.php #uptime');

    dengan catatan, variable $(uptime) nya dimasukkan ke dalam element dengan id uptime

    1
    2
    3
    
    <span id="uptime">
    $(uptime)
    </span>
  27. TItasix says:

    kalau meretrieve Grid Ajax menggunakan jquery gmn yach? saya bikin toolkit ajax basis Twilight plus generatornya tapi waktu digabungin ke FaceBox(corenya jquery) ajax saya di kepanggil apa mungkin bentrok?

  28. gawibowo says:

    @TItasix:
    grid ajax itu maksudnya gimana ya? saya belum pernah tahu tentang Twilight/toolkit ajax. apa ada contohnya yg bisa saya lihat?

  29. AJ. says:

    @gawibowo
    nah, itu baru manteppp..!!! sukses banget

    saya yakin klo ajax bisa menangani masalah sangat sepele begitu

    makasih petunjuknya mas…

  30. titasix says:

    Kemana saya kirim sample Toolkit ajax dan generatornya biar kita bisa sharing gabungin dengan Jquery? mungkin rekan2 yang lain bisa kasih masukan.atau mas punya YM nya? id YM saya tommy_share@yahoo.com.sg

  31. gawibowo says:

    di halaman contact mas ada alamat saya

  32. Ricky Junior programer says:

    Mas gatot ok banget. Sangat membatu.klo bisa tambahin bagaimana caranya untu multiple insert dengan checkbox

  33. Murah-Banget.Com says:

    Hi,
    Thanks for the info,

    Marten Stephanus

  34. mupet says:

    good tutorial, simple ternyata, thnks

  35. saiful haqqi says:

    Ajax menggunakan Jquery ternyata simple banget, selama ini saya selalu baut function sendiri untuk ajax, dan selalu melakukan copy paste untuk response 200.

    Jika ingin mengubah loading ….. apakah ada method tersendiri atau harus menual melakukannya.

    Terima kasih, tutorial anda sangat membantu

  36. gawibowo says:

    untuk loading, biasanya saya membuat sendiri div yang secara default tidak ditampilkan, misalnya

    <div id="loading" style="display:none">Loading...</div>

    atau kalau berupa gambar:

    <div id="loading" style="display:none">
    	<img src="loading.gif" alt="Loading..." />
    </div>

    dan script di bawah ini akan menampilkan tulisan/gambar loading tsb saat ada proses ajax, dan menyembunyikan saat proses ajax selesai:

    $().ajaxStart(function() {
    	$('#loading').show();
    });
    $().ajaxStop(function() {
    	$('#loading').hide();
    });

    ada juga cara lain seperti ini:
    script di bawah ini akan menampilkan tulisan Loading… di dalam #container sebelum contentnya muncul

    $('#link').click(function() {
    	$('#container').html('Loading...');
    	$('#container').load('content.php');
    });
  37. Ahsanfile says:

    Ada yang kurang canggih sodara-sodara, kalo halaman yang diload ada javascriptnya, function yang diload gak berfungsi,

  38. Kemas Rahmat says:

    mas ari..

    senada dengan Ahsanfile, ketika saya menggabungkan script jquery yang ada di postingan mas ari ini dengan javascript biasa, ternyata script jQuerynya tidak berfungsi …

    bagaimana mas ari ?

    trims.

  39. Rivai says:

    Mas, gimana supaya tulisan loadingnya..
    tetep keliatan walaupun di scroll kebawah.supaya proses loadingnya tetep keliatan.
    contohnya kek disini mas http://www.mallmobil.com/

    Thanks

  40. gawibowo says:

    @Kemas Rahmat:
    script jQuery yg tidak berfungsi yg mana ya? apakah fungsi load() nya yg tidak jalan?

  41. gawibowo says:

    @Rivai:
    loading spt ini sudah pernah saya tulis caranya di sini: http://gawibowo.com/submit-form-dengan-ajax-menggunakan-jquery.htm#comment-131
    yaitu menggunakan position: fixed
    tapi ada kelemahannya yaitu tidak bisa jalan di Internet Explorer 6

  42. Rivai says:

    Saya sudah coba membuka blog http://www.mallmobil.com/ di IE masih berjalan sempurna.

    Masalah yang saya hadapi adalah ketika proses comment.karena form komentar berada di paling bawah.jadi pada saat form komentar di submit.user tidak merasakan adanya proses,karena loading proses berada diatas.sehingga user merasa komentarnya belum terkirim.dan menekan tombol submit berkali kali.

  43. Kemas Rahmat says:

    @gawibowo :

    ya, fungsiloadnya yang gak jalan

    “$(‘#container’).load(‘content.php’);”

  44. paulo says:

    Great Job gawibowo, simple e fast

  45. chan says:

    mo nanya nih mas, kan dengan menggunakan konsep ajax yang didemo tuh ga ada history nya ya? jadi misal kita mau back dari browser tuh ga bisa.
    Jadi mungkin prinsipnya kaya gmail gitu, dia load content nya pake ajax tapi bisa ada history juga. Itu gimana?

    Trims,

  46. phoenixfly says:

    yg ini:

    wekadesign says:
    11 May 2008 at 22:48

    Kalo ga ingin update JQuery nya secara manual… kita bisa juga lo ambil jquerynya langsung dari servernya :D

    kok gw ga paham ya maksudnya? bisa diterangkan lebih lanjut?

    • gawibowo says:

      Maksudnya, ada cara lain utk meng include kan file jquery yaitu langsung dari server yang menyediakan file jquery. Kelebihannya, jika ada update jquery versi baru, kita tinggal mengubah angka versinya, tanpa perlu mendownload lalu mengupload ke server kita sendiri.
      situs jquery.com sendiri menggunakan script dari googleapis.com

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  47. Hello to all :) I can’t understand how to add your site in my rss reader. Help me, please

  48. mown says:

    mas kok ajaxnya gak mau jalan di ie-6
    emang katanya yang bikin cuman bisa jalan di ie6+ doank

    nah yang ane takutin ntar waktu ujian TA nyang ngetest pake browser ie6 itu yang biasanya udah default dari win xp

    ada saran??

    nb:help please deadline tanggal 15 feb

    • gawibowo says:

      Bisa jalan kok mas..
      saya udah nyoba di IE6, IE7, Firefox 2, Firefox 3, Opera 9.5, Google Chrome..
      lancar semua tuh..
      jQuery memang udah support mulai IE6

      • mown says:

        iya terima kasih atas jawabannya
        demo yang mas bowo kasih udah saya coba buka dari laptop emang bisa

        tapi waktu ngerjainnya di PC enggak bisa

        saya bikin ajaxnya buat combobox yang bisa berganti-ganti

        apa perlu update jQuery-nya ya????
        atau memang ada / pakai cara lain untuk menganti isi combobox dengan ajax model lain

  49. alioke says:

    mas,, mau tanya nih,,,klo parsing nya ke div sndiri gmn??ga bisa jalan mas…
    kan d contohnya kyk gini

    $(document).ready(function() {
    $(‘#menu a’).click(function() {
    var url = $(this).attr(‘href’);
    $(‘#container’).load(url);
    return false;
    });
    });

    klo misalnya kyk gini ga bisa refresh langsung page d dlmnya……
    $(document).ready(function() {
    $(‘#menu a’).click(function() {
    var url = $(this).attr(‘href’);
    $(‘#menu’).load(url);
    return false;
    });
    });

    solusinya gimana yah??biar link yg ada d dlm #menu tuh bisa d click lagi….

    • kur says:

      Ehm,udah coba pake live??
      udah aq terapin di Webku,
      di paginationnya yang merupakan hasil load ajax
      $(‘.object_hasil_load_via_aja’).live(‘click’,function(){
      /// disini….
      })

  50. alioke says:

    eh,,udah bisa deh mas….
    trimakasih…
    udah liat d demo nya mas …
    sekali lagi terimakasih…

  51. w0n6.l4 says:

    wew. rame… :)
    tapi thanks mas buat ilmunya.
    moga nti bisa share juga.
    amien….

  52. d3d1n says:

    maaf mas…
    saya masih newbe ttg jquery..
    tolong pencerahannya dunk..
    klo loading -nya tampil pada saat halaman dibuka pertama kali, bisa tidak,,tolong bagi scriptnya donk..

    thx b4..

    • gawibowo says:

      animasi loading akan otomatis muncul selama ada proses ajax.
      supaya animasi loading juga muncul saat halaman dibuka pertama kali, maka anda juga harus menggunakan ajax saat pertama menampilkan halaman, misalnya menggunakan fungsi load()

      • Rendra says:

        mas, misalnya saya bikin beberapa fungsi jQuery. Klo saya mau animasi Loading hanya muncul utk satu fungsi tertentu saja, caranya gmn ya mas?
        mohon bntuannya. trims.

        • gawibowo says:

          kalau mau animasi loadingnya hanya untuk fungsi tertentu, maka jangan menggunakan ajaxStart() dan ajaxStop() soalnya itu adalah global event
          contoh menggunakan local event:

          $.ajax({
          	type: 'GET',
          	url: $(this).attr('href'),
          	beforeSend: function() {
          		$('#loading').show();
          	},
          	success: function(data) {
          		$('#loading').hide();
          		$('#container').html(data);
          	}
          });
  53. agus says:

    Trims mas atas tutorial nya, sangat membantu.
    Mas, kalo dalam halaman yang di load itu ada srcipt jquery nya lagi, ko ga bisa jalan ya?

  54. fendiaz says:

    thanks mas…. saya sangat terbantu dan akan saya postingkan juga di blog saya di http://www.diazscript.wordpress.com

    mohon ijin

  55. suhendar says:

    Mas Bisa bantuin bikin source slideshow image dengan Jquery dengan ambil datanya dari database gitu dan saya hanya ambil data nama dari gambar pakai moveupload aja bukan gambar type blob di mysql, saya sedang dalam pengerjaan TA ? tolong ya mas ! terima kasih sebelumnya atas tulisan membantu saya dalam TA

  56. ahk tak tau pula…
    jquery.com ada speak indonesianyah…
    dah pusing² ngartiin sendiri, ampe pusing gua…
    ternyata ada gawibowo.com yg membantu…

  57. mul14 says:

    Weww.. ternyata ada tutor bahasa lokal..

  58. aum says:

    maaf, kok contohnya gagal ya?
    contentnnya kalo di klik keluar semua..
    mohon penjelasannya

  59. ajie says:

    biar loding nya berada di dalam content bagaimana …..

  60. ajie says:

    $(‘#link’).click(function() {
    $(‘#container’).html(‘Loading…’);
    $(‘#container’).load(‘content.php’);
    });

    ” kalao seperti ini ditaruhnya dimana mas….masih gk ngerti nih

    • gawibowo says:

      lengkapnya seperti ini mas ditaruh di dlm tag <script>:

      $(document).ready(function() {
      	$('#link').click(function() {
      		$('#container').html('Loading...');
      		$('#container').load('content.php');
      	});
      });

      tombol dengan id=”link” jika diklik akan menjalankan fungsi load() dan sebelum content nya tampil akan muncul tulisan loading… di dalam #container

  61. yayan says:

    Maaf mau ikutan gabung nich!
    Jika ingin membuat content yang berupa popup seperti pada web http://www.bali-notebook.com saat mengklik ADD TO CART pada masing-masing image itu gimana ya? apa bisa dengan jQuery?

    Maaf apabila pertanyaannya keluar dari tema yang dibahas disini.

  62. himawan says:

    jQuery memang luar biasa.. Klo sempat tambahin contoh aplikasi jquery lainnya ya..
    Makasih atas Tutorialnya,

  63. imam says:

    Wah makasih banyak atas tutorialnya,.baru mw coba belajar ajax nih :)

  64. rezaprof says:

    thanks mas gawiwibowo atas tutornya.
    saya mo donlot sourcenya koq ga bsa ya??
    bsa diupload tempat lain ga??

    thanks sebelumnya :)

  65. angel says:

    mas, minta contoh untuk fungsi load donk, yg bagian parameter dan callback functionnya, really2 need that..mohon sejelas2nya dan selengkap2nya,hehehe…thx

    • gawibowo says:

      contoh menggunakan callback:

      $("#container").load("content.php", {type: "POST"}, function() {
      	alert("Content berhasil diload");
      });

      callback tersebut merupakan function yang dijalankan saat request ajax nya selesai

      • angel says:

        kalo si callbacknya itu manggil suatu fungsi dengan nama misalnya function cek, itu manggil nya gmn mas?

        $(“#container”).load(“content.php”, {type: “POST”}, cek() {
        alert(“Content berhasil diload”);
        });

        function cek()
        {
        ……
        }

        begitu kah?
        atau kayak gmn ya?
        makasi…

        • gawibowo says:

          script yg saya tulis di atas menggunakan anonymous function (fungsi tanpa nama)..
          kalau menggunakan fungsi dengan nama, cara menuliskannya seperti ini:

          $("#container").load("content.php", {type: "POST"}, cek);
           
          function cek() {
          	alert("Content berhasil diload");
          }
  66. angel says:

    oh ya klo saya pake jquery untuk load halaman y mengandung jquery lg didlm halaman yg di panggil bisa ga?gmn caranya y??thx…

  67. Hery says:

    Sankyu gan, sungguh bermanfaat…

  68. Rius says:

    halo mas wibowo,
    sori keluar dari topik…
    mas ada tab jquery?
    tp di dalam tabnya bisa melalukan proses data(edit,delete,tambah)
    tanpa keluar dari tab

    Makasih

  69. maspuy says:

    wow.. mastap nih ulasannya, ilmu baru, ikut nimbrung mo belajar jquery lbih dalam..

  70. darun says:

    mas klo jquery ngload di halaman pertama kali dibuka gmna ya???

    misal di div id=produk.

    mas klu buat fungsi sendiri di jquery terus manggil fungsi itu di html gmna ya???

    1 lagi maz untuk mengetahui fungsi2 yg ada d jquery ada referensi yang mungkin cukup mudah untuk dipahami??

    mav newbie…

  71. darun says:

    mas tadi dah sekalian nyoba program diatas,,klu diubah untuk load web pertama kali dibuka scriptnya hanya kek gini ya :

    $(function() {
    $(‘#container’).load(“content.php?id=4″);
    });

    apa ada yg salah??tp klu ditambahkan sebelum dy ngload semua diberi loading dulu selagi proses gmn ya mas??

    makasih..

    pertanyaan diatas dijawab juga ya mas..

  72. ko bingung ya q…

    apa bener jquery lebih mudah dari ajax??

  73. Ibanez says:

    mas gawibowo, request tutorial sederhana membuat operasi create, insert, update, delete menggunakan fungsi ajax pada jquery, dengan data yang diambil dari mysql database, ditunggu ya mas tutorialnya

  74. darun says:

    membuat fungsi ajaxstart and ajaxstop sendiri gimana mas tidak global,jadi ketika menjalankan aplikasi ajax lain fungsi dari ajaxstart dan ajaxstop tidak mucul.

    Mohon dibales…

  75. darun says:

    hehehe,,mav gak jadi mas..

    ada dibahas pada comment diatas,,dan dicoba dah bner..hehehe

    makasih mas………

  76. didid says:

    mas ada yang lebih lengkap ga, saya baru belajar, udah bingung tutorial pake bhs inggris, udah 223 halaman lagi. pussiiiing. enak klo ada bhs indo’a. mohon bantuan….

  77. Darto KLoning says:

    wah lumayan nih,
    ane lg belajar ajax-ajax.
    di coba , yo di coba.
    okre.

    but seems it will wonderfull.

    OK. thanks.

  78. ardianzzz says:

    i love javaScript!!

  79. ojie says:

    mas saya punya menu diatas dengan div idnya menu_atas dan di kiri div id nya menu_kiri

    gimana caranya dari kedua menu tersebut muncul di tengah dengan div id nya container

    saya dah coba mengunakan 2 fungsi dan berhasil tapi apakah da cara hanya menggunakan satu fungsi aja

    seperti fungsi mas di atas

    $(document).ready(function() {
    $(‘#menu a’).click(function() {
    var url = $(this).attr(‘href’);
    $(‘#container’).load(url);
    return false;
    });
    });

  80. aria_dee says:

    mas, ane buat menu yang isi menunya diambil dari database (mysql). ane kesulitan pas buat content.php nya (di code ane pake centre.php). coz setiap divnya khan harus sesuai sama isi database. nah, pas nge-echo html untuk cuma satu yang kepilih sama menu ane.

    ini code di index ane:


    ini div di left.php ane:
    echo ”
    Menu Utama
    “;
    while($k=mysql_fetch_array($kategori)){
    echo “$k[nama_kategori]“;
    }
    echo “”;

    terakhir div di centre.php ane:
    $isi=mysql_query(“SELECT `berita`. * , `kategori`.`nama_kategori`
    FROM `kategori` , `berita`
    WHERE (`kategori`.`id_kategori` = berita.id_kategori
    ) order by `berita`.`id_kategori` ASC”);
    echo “”;

    //untuk menu utama
    while($r=mysql_fetch_array($isi)){
    echo “”;
    echo “ $r[nama_kategori]“;
    echo “
    .: $r[judul] :.
    $r[isi_berita]“;
    echo “”;
    }

    mohon komentarnya. trimakasih :D

  81. deni says:

    thank’s berat mas

  82. irfan satriadarma says:

    cuma mau bilang makasih. ini dia yang saya cari.. hehe.. thx berat ya mas bowo… really appreciate this tutorial. great.

  83. ardi says:

    mas mohon pencerahannya

    saya memakai fungsi yang ada ditutorial ini..
    tetapi saya ada masalah jika ada script jquery didalamnya, maka script tersebut tidak bisa jalan..
    saya sudah baca koment diatas,tetapi kurang jelas caranya..
    terima kasih atas penjelasannya

  84. riszkhy says:

    Ma’af nich bang wibowo…

    klo function yang di tutorial bang wibowo itu di execute dengan button gman ya?

    koq aku gagal terus…

    mohon pencerahanya

    thx

  85. dewo19 says:

    manstap gan!!
    keren maturnuwun suhu gatot…

    seepp seeppp seeppp boii…

    haha,,

  86. peto says:

    sob ku nyoba contoh jquery yg di websitenya
    <html>
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
    <script src=\"jquery-1.3.2.js\" type=\"text/javascript\"></script>
    <script type=\"text/javascript\">
    $(document).ready(function(){
    $(\"a\&quot;).click(function(event){
    alert(\"As you can see, the link no longer took you to jquery.com\&quot;);
    event.preventDefault();
    });
    });

    </script>
    </head>
    <body>
    <a href=\"http://jquery.com/\">jQuery</a>
    </body>
    </html>
    jalanin di ie 6 dan firefox 3 g jalan, begitu nyoba di opera, safari dan crome isa jalan

  87. sty says:

    :) hehee… mantap !!! dpt tongkrongan baru nih.

  88. Ratex says:

    hehe mas bowo…maav mungkin saya yg masih terlalu bodoh ini n masih sangat baru ini ga taw harus ngapain….tapi yang jelas di komp q ko ga jalan ya mas..hehe mohon pencerahannya..scrip index.html nya seeh jalan cuma napa pas di click menu1 ko semua conten malah keluar semuanya ya..gitu juga dengan menu seterusnya…apanya yg salah n harus gimana mas..mohon pencerahannya makasih

  89. Ratex says:

    setelah saya coba ternya cuma di masalah penulisan PHP nya ja mas hehe…maklum masih newbi….cuma sekarang ada masalah baru….

    secara keseluruhan sudah berjalan dengan sangat baik rapih dan bagus..tapi ada masalah timbul ketika saya menambahkan dan sedikit fungsi
    var myMenu;
    window.onload = function() {
    myMenu = new SDMenu(“my_menu”);
    myMenu.init();
    };

    dan mengubah

    menjadi

    maka ketika saya click menu1 – menu4 malah keluar di page baru….kenapa ya mas

    class sdmenu itu berupa sdmenu.js yang di dalamnya seperti ini :

    function SDMenu(id) {
    if (!document.getElementById || !document.getElementsByTagName)
    return false;
    this.menu = document.getElementById(id);
    this.submenus = this.menu.getElementsByTagName(“div”);
    this.remember = true;
    this.speed = 3;
    this.markCurrent = true;
    this.oneSmOnly = false;
    }
    SDMenu.prototype.init = function() {
    var mainInstance = this;
    for (var i = 0; i < this.submenus.length; i++)
    this.submenus[i].getElementsByTagName(“span”)[0].onclick = function() {
    mainInstance.toggleMenu(this.parentNode);
    };
    if (this.markCurrent) {
    var links = this.menu.getElementsByTagName(“a”);
    for (var i = 0; i < links.length; i++)
    if (links[i].href == document.location.href) {
    links[i].className = “current”;
    break;
    }
    }
    if (this.remember) {
    var regex = new RegExp(“sdmenu_” + encodeURIComponent(this.menu.id) + “=([01]+)”);
    var match = regex.exec(document.cookie);
    if (match) {
    var states = match[1].split(“”);
    for (var i = 0; i < states.length; i++)
    this.submenus[i].className = (states[i] == 0 ? “collapsed” : “”);
    }
    }
    };
    SDMenu.prototype.toggleMenu = function(submenu) {
    if (submenu.className == “collapsed”)
    this.expandMenu(submenu);
    else
    this.collapseMenu(submenu);
    };
    SDMenu.prototype.expandMenu = function(submenu) {
    var fullHeight = submenu.getElementsByTagName(“span”)[0].offsetHeight;
    var links = submenu.getElementsByTagName(“a”);
    for (var i = 0; i < links.length; i++)
    fullHeight += links[i].offsetHeight;
    var moveBy = Math.round(this.speed * links.length);

    var mainInstance = this;
    var intId = setInterval(function() {
    var curHeight = submenu.offsetHeight;
    var newHeight = curHeight + moveBy;
    if (newHeight minHeight)
    submenu.style.height = newHeight + “px”;
    else {
    clearInterval(intId);
    submenu.style.height = “”;
    submenu.className = “collapsed”;
    mainInstance.memorize();
    }
    }, 30);
    };
    SDMenu.prototype.collapseOthers = function(submenu) {
    if (this.oneSmOnly) {
    for (var i = 0; i < this.submenus.length; i++)
    if (this.submenus[i] != submenu && this.submenus[i].className != “collapsed”)
    this.collapseMenu(this.submenus[i]);
    }
    };
    SDMenu.prototype.expandAll = function() {
    var oldOneSmOnly = this.oneSmOnly;
    this.oneSmOnly = false;
    for (var i = 0; i < this.submenus.length; i++)
    if (this.submenus[i].className == “collapsed”)
    this.expandMenu(this.submenus[i]);
    this.oneSmOnly = oldOneSmOnly;
    };
    SDMenu.prototype.collapseAll = function() {
    for (var i = 0; i < this.submenus.length; i++)
    if (this.submenus[i].className != “collapsed”)
    this.collapseMenu(this.submenus[i]);
    };
    SDMenu.prototype.memorize = function() {
    if (this.remember) {
    var states = new Array();
    for (var i = 0; i < this.submenus.length; i++)
    states.push(this.submenus[i].className == “collapsed” ? 0 : 1);
    var d = new Date();
    d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
    document.cookie = “sdmenu_” + encodeURIComponent(this.menu.id) + “=” + states.join(“”) + “; expires=” + d.toGMTString() + “; path=/”;
    }
    };

    bisa tolong kah mas bowo kasih petunjuknya…apa yg harus saya lakukan supaya pas di click menu tuh…masih tetep kya awal mula sebelum di modiv…

  90. Ratex says:

    ini yg saya ubah

    menjadi

    maaf klo terlalu panjang..hehe..saya cuma ingin faham aja mas apa yg harus di lakukan…thaks

  91. Ratex says:

    dan mengubah
    //
    menjadi
    //

    astaga ni yg ke 3 kaleenya napa ga muncul di postingan ya bariss neeh

  92. Ratex says:

    dan mengubah
    div id=”menu”
    menjadi
    div id=”my_menu” class=”sdmenu”

    terakhir mudah2an maaf mas ya

  93. mown says:

    Mas gawibowo yang baik, sebelumnya trima kasih karena udah posting materi JQuery ini. berkat anda saya jadi melek yang namanya JQuery

    yang ingin saya tanyakan
    kenapa ketika saya menjalankan script ini kok gak ada perubahan sama sekali

    $(document).ready(function(){
    $(“#result”).load(“http://www.google.com”);
    });

    sedangkan ketika mencoba dari tutor yang lain seperti ini kok bisa?

    $.getJSON(“http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?”,
    function(data){
    $.each(data.items, function(i,item){
    $(“”).attr(“src”, item.media.m).appendTo(“#images”);
    if ( i == 3 ) return false;
    });
    });

    apa fungsi load itu hanya bisa digunakan untuk server lokal saja, selain google.com saya juga sudah mencoba situs yang lain dan hasilnya sama saja sedangkan untuk meload dari localhost bisa semuanya

    mohon pencerahannya

    trima kasih..

  94. astri says:

    mas mau nanya.
    saya sudah download dan memodifikasi codingan mas ini, karena saya mau buat menu tree dengan ajax.

    tapi ya itu..ada beberapa kendala yang saya bingung mengatasinya.
    pada codingan saya, saya hilangkan id=menu, yang ada hanya id=container dengan isi dari database (data2 yang akan dijadikan root pada menu tree), setiap diklik root tersebut akan memanggil file content.php yang isinya manggil database.
    programnya sudah jalan semua.
    tapi untuk menampilkannya yang rusak

    saat klik rootnya, tampil anak2nya,tapi rootnya menghilang dan begitu seterusnya. gimana ya caranya supaya root tetap ditampil dan anak2nya juga, seperti layaknya menu tree. untuk menu tree saya gunakan dhtmlgoodies.
    terima kasih.

  95. sidik says:

    keren bos tutorial nya.. ijin bookmark ya :) btw thx 4 info nya

  96. kur says:

    Wah,ternyata jquery sudah diminati banyak orang skrg :)

  97. rey says:

    thx u banget mas. salah satu cara efek loadingnya saya terapkan di web saya http://www.unduhlagu.com
    dan berhasil :-)

  98. sulthonie says:

    Mas Gawibowo, emang klo pake jQuery pastinya OK. tapi, ketika di klik kanan, tampilannya jadi netral, jadi halaman sendiri. Nah!, kira-kira supaya menghindari hal ini bagaimana menurut mas gawi…thx

  99. sulthonie says:

    O…sorry, kurang lengkap request saya. Kan di Firefox atau browser sejenis ada fasilitas klik kanan ‘new tab’ ataw ‘new window’. Nah, link pada menu tsb ketika dah diklik kanan ‘new tab’, dia muncul jadi halaman mandiri tanpa layout halaman sebelumnya. Bahkan tanpa layout sama sekali….gitu mas gaw…

    • gawibowo says:

      Iya mas memang seperti itu, soalnya di contoh ini urlnya dimasukkan di atribut href (untuk mempermudah saja), jadi kalau dibuka di tab baru akan dianggap sebagai link biasa.

  100. hills says:

    terima kasih banyak mas ! soalnya udah lama aku cari contoh penggunaan ‘load’ untuk file *.php, tulisan/review umumnya load untuk *.html, ternyata berhasil.

  101. hills says:

    mas …
    apa bedanya source js antara versi jquery-1.2.3.pack.js dengan yang terbaru v 1.4.2
    kenapa ajax-nya tidak me-load file php dengan jquery yang terbaru tersebut?

  102. hills says:

    maaf ternyata bisa (dng jquery terbaru)

    sebelumnya nga bisa karena page yang di-load dalam #container (content.php kalo dlm contoh di atas) mengandung jquery juga, maka deklarasi javascript dan css nya harus dituliskan dalam halaman utama (ajax1.html jika dalam contoh di atas)sehingga seluruh fungsi jquery berjalan dengan baik (ditampilkan dengan baik pada saat di-load oleh halaman utama)

    >> sekaligus menjawab pertanyaan user di atas \"kenapa halaman yang di-load jika mengandung jquery/javascript nya tidak jalan; ternyata deklarasi function dan juga css nya harus diletakkan di main page\"

    tengkyu berat Bro …..

  103. ilham says:

    makasih infonya, tapi agak berat diclientnya y?karena pernah masang banyak jquery hasilnya komputer jadi lemot

  104. adi bowo says:

    mantap bozz, sukses terus pokoknya :)

  105. liston says:

    Mas, minta tolong ni…
    Ada 2 buah input type=radio.
    Trus kalau misalnya diclick akan memanggil fungsi di PHP. Sekalian untuk kirim parameternya.
    Caranya gimana ya mas???

    Thanks

  106. idik says:

    ma gimana caranya supaya pas browser di refresh contentnya tetep pada konten yang sedang tampil…

    jadi misalkan saya mengklik Menu 3 nah isi kontentnya kan beruabah jadi isi content menu 3 .. kemudian saya refresh browser saya, yang saya inginkan contentnya tetep pada menu 3..

  107. michelle says:

    mas, mao nanya.. ceritanya gw mao buat gbook jadi ada form nya contohnya gw masukin formnya di content.php?id=gbook gimana caranya setelah diklik send baliknya lagi di content.php?id=gbook bukan di indexnya

    masih bantuannya mas..

  108. paryoto says:

    sdh mencoba hingga semalaman blm berhasil boos …makasih artikel nya

  109. keren Script ajax nya………….. keep posting bro

  110. baru sempet mo belajar ajax ne,,,
    wat nambah2 b.pemrograman z,

  111. Joo says:

    nanya dun….. apa bisa diterapkan di blogger kah????

  112. Irma says:

    wah berguna banget tutorialnya. thx :D

  113. dodi says:

    mas wibowo, menu ini kok kalo dibuka di tab baru dengan klik kanan > Open Link in New Tab, yang kebuka cuma halaman contentnya. gimana caranya supaya halaman di tab baru tersebut tetap menampilkan menu ?

  114. bim says:

    nice mantap gan

  115. Crozby says:

    skrip $(\’#container\’).html(\’Loading…\’);
    kn nampilin teks html gan. misal klo mau nampilin gambar gif gmn ya gan? :(

  116. ajax is the powerfull web programing.. gue demen banget nemu ini website yang kasi info keren.
    makasih….

  117. Wah mantap niy.. keep posting gan..

  118. Emeen says:

    mas saya baru belajar ajax nech, jdi msih hrus banyak belajar ..
    saya mau tanya, saya udah tes scriptnya mas yg d’atas, tpi ada masalah pas d’newtab ..
    gimana ngakalinnya supaya pas d’newtab tampilannya bisa penuh, maksudnya tetap d’halaman utama (yang ada link n containernya), tapi contentnya yang berubah, itu g’mana caranya ya ??
    please, udh 3 hari nyari blm dapat” jga ..

  119. kocu says:

    mas knp ya koq prototype ga bisa digabung ma mootools ?? mungkin mas bisa bantu saya :)

    terima kasih buat ilmunya …

  120. bodonk says:

    mas klo jquery ajax untuk proses delete kya gmn mas?????? mohon bimbingannya

  121. retrio says:

    Mas, bowo boleh mintan bantuanya?? saya sedang ada kerjaan development website dimana function loginnya menggunakan account facebook, untuk plugin saya sudah dapat tapi saya kesulitan saat ambil param cookiesnya.. boleh dibantu rekan yg pernah ada pengalaman.. suwun.

  122. makasih ya mas tutorial nya keren banget..

  123. achmad says:

    Mas wibowo, bisa ngk klo variabel yang di dapat y d ubah dalam bentuk ke variabel PHP?

  124. ska says:

    gmana cra manipulasi urlx spy ajax pagex bisa d reload pada halaman yg sama n ga kmbali ke awal???

  125. buqento says:

    Thanks infonya mas :)
    Tetap share ilmunya yach?

  126. JUAHFJGHAS says:

    brow ksh tw jngan stngah-stngah

  127. tito says:

    mas mau nanya nih.. gimana kalo menu diatas ditambah jadi 3 level sub menu car manggilnya dari jquery bagaimana ya.. saya coba tapi brantakan tampilannya.. thanks

  128. Budiman says:

    Halo para master..
    Mohon bantuan..
    sebagai contoh :
    pada halaman html, saya punya input text :

    Ajumlah1
    Ajumlah2
    (dst.. di generate dengan code)
    totalA

    Bjumlah1
    Bjumlah2
    (dst.. di generate dengan code)
    totalB

    Selisih

    nah yang ingin saya tanyakan bagaimana cara agar ketika pada tiap kita ketik angka dalam masing input text muncul otomatis jumlah totalA dan B kemudian juga ada selisihnya…

    mohon bantuannya terima kasih

  129. ajax says:

    wowww tipsnya oke banget…ane coba jalan nih ajax ane om…thanks yak

  130. wah, bermanfaat sekali tutorialnya pak gatot wibowo…

    tapi bisa ngga tutorial ini dibuat untuk nested menu, jadi ada submenu nya gitu…

    In house training Buku anak murah

  131. Abdil says:

    wah mantab ni tutorialnya.. :D saya lagi belajar JS bakal mangkal disini kayanya hohoo maksih mas,

  132. tresna says:

    maaf niih pak…
    saya mau tanya kenapa yaah?
    jika saya menyelipkan Berbagai kode seperti : kode banner, kode text, kode embed video Dll …
    ga bekerja di blog saya….
    Please help me…
    Check http://ptresna-p.blogspot.com

    *Terima kasih*

  133. Rizki says:

    mas, kalo contentnya otomatis ganti sendiri setiap 10 atau 15 detik bagaimana?

  134. mas says:

    mas..knpa wktu klik menu 1 tdk muncul menu 1 tapu
    munculnya semua konten dari menu 1-menu 4 ngumpul jd stu.

    blz cpet y.

  135. edi says:

    mantap mas, saya coba bisa, hehehe, trus posting ya mas.. :)

  136. makasih banyak mas, simpel banget pembahasannya, dah di download juga tutorialnya, sharing is caring :)

  137. Sukalagu says:

    lumayan sedikit memeras otak juga..

  138. apin says:

    om wibowo,
    nanya dong,..kalo contoh ajax dalam penggunaan <option> </option> gimana ya?
    jadi kasusnya kita melakukan pilih option ke1 kemudian load ke option ke2,. semisal kategori lalu load subkategori ..semoga tidak bingung dengan pertanyaan saya ya om… :D
    need advise om.. :D

  139. reza says:

    mas saya mau tanya misalkan dalam 1 halaman ada 2 menu tab dan keduanya menggunakan ajax untuk menampilkan data. nah saya juga pakai ajax untuk menampilkan loading untuk kedua tab tersebut. masalahnya kalau saya buka salah satu tab dan menampilkan data baik proses dan loadingnya sukses tapi begitu saya ke tab yang satunya langsung muncul loading padahal saya belum memanggil fungsi untuk menampikan ajax. kayaknya sih sewaktu tab yang 1 ajax mulai tab kedua juga menampilkan loading tp sewaktu tab 1 ajax selesai dan loading hilang pd tab 2 ga hilang. padahal id untuk loading pada tab 1 & 2 berbeda. tolong bantuannya mas. thanks :D

  140. Dimas says:

    Maaf , saya mau tanya nih
    Gimana cara menggunakan jQuery ajax di template seperti http://themes.creativemilk.net/files/elite/index.html
    Saya sudah coba mengikuti tutorial diatas , tetapi tidak bisa
    Mohon bantuannya
    Makasih

  141. ndemo says:

    kenapa saya coba di localhost , hasil contenya keluar semua , dan keluar di bordernya ,,,
    seharusnya kalau saya klik menu1 yang keluar hanya isi menu1 saja

    ctr+D dulu

  142. arrosyad says:

    waw sengaja disalahkan y?? ahahaha.. keren sih, untung liat dari bentuk asal dari php baru ketemu.. makasih mas gawibowo..

  143. djoels says:

    mantep banget mas bowo….cukup membantu…sudah pusing nyari nya

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA