Minggu, 16 Agustus 2015
Belajar Jquery Ajax Dasar .ajaxSuccess Menambahkan Fungsi Saat Ajax Complete
Belajar Jquery Ajax .ajaxSuccess Menambahkan Fungsi Saat Ajax Complete
Jaka Prima Maulana
selamat datang pengunjung primasaja.com,
pada tutorial sebelumnya kita telah membahas mengenai cara penggunaan dan fungsi dari .ajaxStop yaitu perintah - perintah yang akan dijalankan ketika ajax pertama kali dijalankan dan tutorial kali ini akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxSuccess Menambahkan Fungsi Saat Ajax Complete " tutorial jquery ajax .ajaxSuccess 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 .ajaxStop menjadi .ajaxSuccess pada view
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {
function index(){
$this->load->view('Ajaxsuccess');
}
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('Ajaxsuccess'); yaitu buat file Ajaxsuccess.php pada folder view dan buat script berikutclass Ajaxevent extends CI_controller {
function index(){
$this->load->view('Ajaxsuccess');
}
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 .AjaxSuccess 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>
<style>
.primasaja{
margin-left: 50%;
margin-right: 50%;
background-color: #51A3EC;
}
</style>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxSuccess 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).ready(function(){
$(".lagiproses").hide();
});
$(document).ajaxStart(function(){
$(".pemberitahuan_aktifitas").text("data mulai Direquest");
});
$(document).ajaxStart(function(){
$(".lagiproses").show();
});
$(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).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});
$(document).ajaxStop(function(){
$(".lagiproses").hide();
});
$( document ).ajaxSuccess(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas_lengkap" ).append( "<div style='background-color:pink; width:50%;'>berhasil direquest</div>" );
});
</script>
</body>
</html>
<html>
<head>
<title>Tutorial Jquery ajax .AjaxSuccess 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>
<style>
.primasaja{
margin-left: 50%;
margin-right: 50%;
background-color: #51A3EC;
}
</style>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxSuccess 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).ready(function(){
$(".lagiproses").hide();
});
$(document).ajaxStart(function(){
$(".pemberitahuan_aktifitas").text("data mulai Direquest");
});
$(document).ajaxStart(function(){
$(".lagiproses").show();
});
$(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).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});
$(document).ajaxStop(function(){
$(".lagiproses").hide();
});
$( document ).ajaxSuccess(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas_lengkap" ).append( "<div style='background-color:pink; width:50%;'>berhasil direquest</div>" );
});
</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
buat file dengan nama ajaxsuccess.php dan isikan code berikut ini :<html>
<head>
<title>Tutorial Jquery ajax .AjaxSuccess 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>
<style>
.primasaja{
margin-left: 50%;
margin-right: 50%;
background-color: #51A3EC;
}
</style>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxSuccess 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).ready(function(){
$(".lagiproses").hide();
});
$(document).ajaxStart(function(){
$(".pemberitahuan_aktifitas").text("data mulai Direquest");
});
$(document).ajaxStart(function(){
$(".lagiproses").show();
});
$(document).ajaxSend(function(){
$(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("ajaxevent/test1");
});
$(document).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});
$(document).ajaxStop(function(){
$(".lagiproses").hide();
});
$( document ).ajaxSuccess(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas_lengkap" ).append( "<div style='background-color:pink; width:50%;'>Berhasil Direquest!</div>" );
});
</script>
</body>
</html>
<?php echo "terserah anda";?>
Catatan : download jquery.js di sini
silahkan jalankan
Penjelasan :
$( document ).ajaxSuccess(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas_lengkap" ).append( "<div style='background-color:pink; width:50%;'>Berhasil Direquest!</div>" );
});
dari skrip tersebut ajaxSuccess akan terpanggil setelah data dari request
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
berhasil di request
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