Jumat, 14 Agustus 2015
Belajar Jquery Ajax Dasar ajaxStart
Belajar Jquery Ajax Dasar ajaxStart
Jaka Prima Maulana
selamat datang pengunjung primasaja.com,
tutorial kali ini sesuai judul yang kita akan bahas yaitu mengenai " Belajar Jquery Ajax Dasar ajaxStart ". Sesuai dengan nama .ajaxStart yaitu perintah - perintah yang akan dijalankan ketika ajax pertama kali dijalankan
langsung saja untuk mempraktekkan nya tutorial ini akan di bagi menjadi 2 yaitu dengan menggunakan framework codeigniter dan php / HTML.
1. Framework Codeigniter
pada tutorial ini kita akan membuat website dengan fungsi jquery ajaxStart dengan menggunakan framework codeigniter.
- buat controller dengan nama ajaxEvent.php lalu buat kode seperti berikut :
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {
function index(){
$this->load->view('Ajaxstart');
}
function test1(){
echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
}
}
- sesuai dengan apa yang telah kita buat dalam script kontroller tadi yaitu $this->load->view('Ajaxstart'); maka selanjutnya kita buat view dengan nama Ajaxstart.php lalu buat script seperti berikut :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<html>
<head>
<title>Tutorial Jquery ajax .AjaxStart 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 .ajaxStart 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).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();
});
</script>
</body>
</html>
seperti biasa buat anda yang belum ada jquerynya bisa di download disini lalu silahkan jalankan maka anda akan mendapatkan hasil seperti foto yang saya buat di awal postingan ini<html>
<head>
<title>Tutorial Jquery ajax .AjaxStart 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 .ajaxStart 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).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();
});
</script>
</body>
</html>
2. PHP/ HTML
untuk php nativ buat file didalam satu folder lalu buat code seperti berikut
<html>
<head>
<title>Tutorial Jquery ajax .AjaxStart PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="<?php echo base_url();?>jquery-1.11.1.min.js"></script>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxStart 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).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();
});
</script>
</body>
</html>
Penjelasan : ketika ajax memulai merequest maka script start ini akan jalan, seperti isi code diatas dimana bahwa telah di spesifikasikan default saat web terbuka maka document tersebut akan menyembunyikan css .lagiproses $(document).ready(function(){
$(".lagiproses").hide();
lalu ketika button di klik maka ajaxStart dan ajaxSend akan dijalankan
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar