Primasaja.com: Service WEB, MOBILE & SOFTWARE DEVELOPMENT , ENGINEERING & ARCHITECTURE , DESIGN & CREATIVE , ADMIN SUPPORT , SALES & MARKETING , INSTALASI JARINGAN & KOMPUTER
Email: jakaprima123@gmail.com
Phone: 081311086653
Fax: -
Url:
cash, credit card
Perum Griya Rajeg Lestari Blok C No 24
Tangerang indonesia 15540

Belajar Jquery Ajax Dasar ajaxSuccess Menambahkan Fungsi Saat Ajax Complete

0
jaka



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 berikut

<?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>  





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>  


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 : 


$( 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. :)

www.primasaja.com - "



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 berikut

<?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>  





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>  


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 : 


$( 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. :)

"

Tidak Ada Komentar: