Muka menggunakan refresh div javascript

Cara mudah membuat auto DIV load dan data array pada latar belakang

Berikut download code php Auto Refresh dengan jQuery

indeks kode. php

spanduk { lebar. 600px; . tengah; . 0 mobil; . terkait; . 5px 0 5px 5px; . 5px 0 5px 5px; . 5px 0 5px 5px; . 50px 20px;}
spanduk. sebelum {konten. ""; . sangat; . 0; . 0; lebar batas. 0 24px 24px 0; . padat; . #F0F0F0 #fff; . 0px 0 0px 5px; . 0px 0 0px 5px; . 0px 0 0px 5px;}
#layar {lebar. 100%; warna. #555;"Century Gothic",CenturyGothic,AppleGothic,sans-serif;line-height. 45px;}
txt-judul {font-size. 2em;}
txt-subtitle {font-size. 1. 2em;}

$(dokumen). siap(fungsi(){
setInterval(fungsi(){
$("#layar"). memuat('spanduk. php')
}, 2000);
});

Kode spanduk. php

$bg_array = array("#CEED9D","#ECED9D","#EDCF9D","#EC9CA7","#ED9DD0","#EE9DE2","#D69DEC","#9E9CEC");
$bg = array_rand($bg_array,1);
?>

Acara pemuatan jQuery ini terjadi setiap 2 detik untuk memperbarui spanduk secara berkala. Alih-alih menggunakan data array statis, kita dapat menghubungkan DB untuk memuat div dengan data dinamis

Berikut adalah face merefresh halaman web namun hanya sebagian. Terkadang kita membutuhkan merefresh suatu bagian pada halaman website yang kita buat tanpa perlu mereload keseluruhan halaman. Hal ini berguna untuk mempercepat performa dari website atau sistem informasi kita. Ini umumnya digunakan pada saat mengupdate data lalu kita perlu melakukan refresh karena data sudah berhasil dibuat. Berikut adalah simulasi refresh otomatis yang saya buat dengan menggunakan php, javascript, dan ajax. semoga bermanfaat

Caranya adalah sebagai berikut

1. Buat file index. php

<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script type="text/javascript">
$(document).ready(function () {
	var id = 1;
    $("#refres").click(function () {
        $.ajax({
   url:"text.php",
   method:"POST",
   data:{id:id},
   success:function(data){
$('#Container').html(data);
alert('Berhasil Refresh');
   }
  });
    });
	
});
</script>
<body>
<button value="Refresh" id="refres">REFRESH</button>
<div id="Container" style="width:300px; text-align:center; height:100px; border: 1px solid black">
<?php include "text.php" ?>
</div>

</body>
</html>

2. Buat teks file. php

File teks. php ini adalah file yang akan di refresh. Kita dapat menggantinya dengan kode tampilan tabel database atau lainnya. saya hanya menampilkan simulasi saja

tambahin trigger saat klik tombol update nya gan supaya ngubah set intervalnya

 
//pertama ubah/buat function setIntervalnya seperti ini
//supaya intervalnya dinamis dibuat parameter




//kedua panggil refreshFunction di button nya dan value intervalnya (di script)
//misal ini button n inputannya

update

//ini script update nya

Untuk menerapkannya di halaman web, perlu adanya perintah refresh secara berkala secara otomatis. Namun jika yang merefresh tersebut adalah keseluruhan halaman web dengan loading halaman lagi, maka tentunya akan sangat menggangu pengunjung, karena halaman yang dilihatnya akan refresh dan loading terus menerus

Nah, supaya user tidak terganggu dengan proses reload content, maka proses reload content halaman dilakukan tanpa berganti halaman

Ada supaya solusi halaman web tidak perlu direfresh setiap saat, yaitu dengan ajax atau dengan cara kedua yaitu dengan merefresh elemen halaman web berupa div. Jadi bagian div saja yang melakukan refresh setiap beberapa detik, tanpa menganggu bagian halaman web lainnya. Informasi maupun query ke database diletakan ke dalam div yang selalu segar secara otomatis

Berikut ini script yang digunakan untuk merefresh div

[cc lang=”javascript”]

var refreshId = setInterval(fungsi()
{
$('#responsecontainer'). beban('oo. php');
}, 1000);
[/cc]

Penjelasan script

Kita menggunakan jquery yang semua scriptnya disimpan dalam jquery-latest. js .
Kemudian pada script di atas, #responsecontainer adalah nama div yang akan disegarkan secara otomatis setiap beberapa detik. Anda dapat menggunakan nama lain yang Anda suka.
00. php adalah halaman yang menyimpan informasi ataupun query ke database mysql
1000 adalah interval div saat merefresh. 1000 berarti div akan merefresh setiap 1 detik. Jika menginginkan refresh tiap 2 detik, maka gantilah menjadi 2000. Sesuaikan dengan keinginan Anda.

Script tersebut diletakkan di bagian head halaman php anda. Sedangkan untuk div nya sendiri diletakkan di bagian body. Berikut script lengkapnya dalam halaman php

[cc lang=”php”]

var refreshId = setInterval(fungsi()
{
$('#responsecontainer'). beban('oo. php');
}, 1000);

[/DC]

Dari script di atas, halaman oo. php akan direfresh tiap 1 detik, jadi jika di halaman oo. php tersebut terdapat query ke database, maka akan dilakukan eksekusi ke database setiap 1 detik. Sehingga update yang terjadi pada database tersebut akan dimunculkan secara realtime

Sedangkan untuk halaman oo. php saya memberikan contoh seperti di bawah ini. Nantinya Anda dapat memasukkan kueri ke halaman oo. php ini sesuai dengan kebutuhan aplikasi php Anda