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 ajaxStart

tidak ada komentar : DIPOSTING OLEH jaka Pada 2015 LABEL: jquery

Tutorial jquery ajaxStart



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


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>   

selesai silahkan jalankan.. :)


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

www.primasaja.com -

Tutorial jquery ajaxStart



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


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>   

selesai silahkan jalankan.. :)


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


Tidak Ada Komentar: