jquery dasar : event method load pada jquery

event method load pada jquery ini sama persis cara kerjanya dengan tulisan yang sudah kita bahas sebelumnya yaitu AJAX . namun dengan memakai event load jquery ini kita tidak usah susah payah lagi untuk ngetik kode ajaxnya, karena sudah terbungkus dalam jquery. namun seperti biasa izinkan diri ini terlebih dulu untuk mengucapkan,

Salam sobat semua

Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah Allah berikan kepada diri ini sehingga diri ini masih bisa menulis dan berbagi dalam tulisan ini, tak lupa sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk baginda Sayyidina Muhammad ibni Abdillah S.A.W. beserta kepada keluarga dan kepada para sahabatnya.

Bismillahir rohmaanir rohiim, kali ini kita akan mencoba membahas bagaimana cara menggunakan event method load jquery di dalam penerapan kode javascriptnya. event method load jquery ini adalah suatu fungsi untuk membuka atau mengakses atau mengambil data di halaman lain dan menampilkannya pada halaman utama dan halaman utama tetap tidak berubah dan tidak akan merefresh. untuk cara penulisan event load pada jquery ini kurang lebihnya seperti berikut

$("selector").load("fileajaxnya");

atau load ini bisa juga melakukan dua fungsi sehingga untuk penulisannya seperti berikut

$("selector").load("fileajaxnya", function(){

//kode action keduanya disini

});

jadi untuk kode jquerynya kurang lebihnya seperti berikut

$(document).ready(function(){

$("selector").load("fileajaxnya", function(){

//kode action keduanya disini

});

});

dan satu hal lagi untuk fungsi load ini cara menjalankannya seperti menjalankan fungsi ajax yaitu menggunakan xampp seperti yang sudah kita bahas pada tulisan sebelumnya . dan untuk contoh kode lengkapnya seperti berikut. kita butuh 2 file, jadi pertama kita buat file loadnya dulu dan kita berinama loadjquery.html, dan kodenya kurang lebih seperti berikut kawan

 <div id="tampil">

<h1>Test untuk load jquery</h1>

<span id="ket"></span>

</div>

dan sekarang kita buat kode javscriptnya yang kurang lebihnya seperti berikut.

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#klik").click(function(){

$("#result").load("loadjquery.html",function(){

$("#ket").html("<h1>Sukses load file loadjquery.html</h1>");

});

});

});

</script>

<select id="chgkey" name="chgkey">

<option>Aku</option>

<option>Kamu</option>

<option>Kita</option>

</select>

<input type="submit" name="klik" id="klik" value="klik saya">

<div id="result"></div>

dan ketika kode diatas dijalankan dan ketika ada user atau kita mengklik tombol klik saya maka kode diatas menghasilkan outpur berupa data string "Test untuk load jquery Sukses load file loadjquery.html" seperti tampak pada gambar berikut

jadi kita bisa membuka atau mengambil data di halaman lain pada halaman utama. dan kita coba dengan kode lainnya biar lebih jelas dan lebih mudah memahaminya. dan contoh kode yang lainnya kurang lebihnya seperti berikut

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#klik").click(function(){

if(document.getElementById("chgkey").value=="Aku"){

$("#result").load("loadjquery.html",function(){

$("#ket").html("<h1>"+document.getElementById("chgkey").value+" Cinta Kamu</h1>");

});

}else if(document.getElementById("chgkey").value=="Kamu"){

$("#result").load("loadjquery.html",function(){

$("#ket").html("<h1>"+document.getElementById("chgkey").value+" Cinta Aku</h1>");

});

}else{

$("#result").load("loadjquery.html",function(){

$("#ket").html("<h1>"+document.getElementById("chgkey").value+" Cinta Rosul</h1>");

});

}

});

});

</script>

<select id="chgkey" name="chgkey">

<option>Aku</option>

<option>Kamu</option>

<option>Kita</option>

</select>

<input type="submit" name="klik" id="klik" value="klik saya">

<div id="result"></div>

dan jika kita jalankan kode diatas maka ada 3 opsi untuk outputnya dan salah satu opsi tersebut adalah ketika kita memilih Kita maka output yang dihasilkan adalah "Kita Cinta Rosul" seperti tampak pada gambar berikut.

 seperti itulah tentang event method load jquery dan cara menggunakan method load jquery kurang lebihnya. dan saya rasa cukup sekian dulu untuk tulisan tentang event method load jquery dan cara menggunakan method load jquery. dan kita lanjut di next tutorial insya Allah. dan mudah-mudahan tulisan ini bisa memberikan manfaat bagi kita semua, Aamiiin.

dan bagi kalian yang ingin download file kode diatas di https://www.mediafire.com/file/z4qx2z6x3tduk6z/fungsiloadjquery.zip/file

Salam sobat semua

#javascript #jquery #html #free #share #berbagi #gratis #web #website #websites #event #load #method #ajax