Sabtu, 15 Agustus 2015
Belajar Jquery Ajax Dasar .ajaxStop
Belajar Jquery Ajax .ajaxStop
Jaka Prima Maulana
selamat datang pengunjung primasaja.com,
pada tutorial sebelumnya kita telah membahas mengenai cara penggunaan dan fungsi dari .ajaxStart yaitu perintah - perintah yang akan dijalankan ketika ajax pertama kali dijalankan dan tutorial kali ini akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxStop " tutorial jquery ajax .ajaxStop ini sendiri adalah daftar - daftar atau perintah - perintah fungsi yang dipanggil atau dijalankan ketika request dari seluruh ajax telah berhasil di request.
Tutorial ini akan dibagi menjadi dua yaitu php / HTML dan framework codeigniter
1. framework codeigniter
buat controller baru untuk membuat code ajaxstop ini atau dengan memakai tutorial sebelumnya dan ganti .ajaxStart menjadi .ajaxStop pada view
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {
function index(){
$this->load->view('Ajaxstop');
}
function test1(){
echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
}
}
setelah itu buat view sesuai dengan view yang dibuat dalam code $this->load->view('Ajaxstop'); yaitu buat file Ajaxstop.php pada folder view dan buat script berikutclass Ajaxevent extends CI_controller {
function index(){
$this->load->view('Ajaxstop');
}
function test1(){
echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
}
}
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<html>
<head>
<title>Tutorial Jquery ajax .AjaxStop PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxStop PrimaSaja.com</h1></center>
<button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>
<div class="pemberitahuan_aktifitas_lengkap"></div>
<script>
$(document).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});
$(document).ajaxStart(function(){
$(".pemberitahuan_aktifitas").text("data mulai Direquest");
});
$(document).ajaxSend(function(){
$(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
});
$(document).ready(function(){
$(".lagiproses").hide();
});
$(document).ajaxStart(function(){
$(".lagiproses").show();
});
$(document).ajaxStop(function(){
$(".lagiproses").hide();
});
</script>
</body>
</html>
<html>
<head>
<title>Tutorial Jquery ajax .AjaxStop PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxStop PrimaSaja.com</h1></center>
<button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>
<div class="pemberitahuan_aktifitas_lengkap"></div>
<script>
$(document).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});
$(document).ajaxStart(function(){
$(".pemberitahuan_aktifitas").text("data mulai Direquest");
});
$(document).ajaxSend(function(){
$(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
});
$(document).ready(function(){
$(".lagiproses").hide();
});
$(document).ajaxStart(function(){
$(".lagiproses").show();
});
$(document).ajaxStop(function(){
$(".lagiproses").hide();
});
</script>
</body>
</html>
selesai silahkan coba jalankan penjelasan akan saya berikan pada akhir postingan ini, lalu untuk php native buat seperti berikut :
2. php/ HTML
<html>
<head>
<title>Tutorial Jquery ajax .AjaxStop PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxStop PrimaSaja.com</h1></center>
<button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>
<div class="pemberitahuan_aktifitas_lengkap"></div>
<script>
$(document).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});
$(document).ajaxStart(function(){
$(".pemberitahuan_aktifitas").text("data mulai Direquest");
});
$(document).ajaxSend(function(){
$(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("ajaxevent/test1");
});
$(document).ready(function(){
$(".lagiproses").hide();
});
$(document).ajaxStart(function(){
$(".lagiproses").show();
});
$(document).ajaxStop(function(){
$(".lagiproses").hide();
});
</script>
</body>
</html>
lalu buat file baru dengan nama test1.php dan isikan code berikut
<?php echo "terserah anda";?>
Catatan : download jquery.js di sini
silahkan jalankan
Penjelasan : sesuai dengan script diatas maksudnya adalah ketika button tombol css .primasaja di klik maka document ready yang awalnya menyembunyikan css .lagiproses maka akan tampil .show() karena .ajaxStart dijalankan dan ketika ajax success memanggil data yang di request maka .ajaxStop akan dijalankan dan .lagiproses akan tersembunyi kembali.
terimakasih telah mengikuti tutorial saya dari awal sampai anda membaca ini jika ada pertanyaan, kritik dan saran silahkan berkomentar dibawah ini. :)
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar