Membuat Auto Refresh di Website dengan Jquery

Publish Date : 02-11-2023 , dibaca 34624 kali, Hari ini dibaca : 1 kali ,0 comments

OK.. pada artikel kali ini admin akan membahas Cara membat Auto Refresh Halaman Website Dengan Jquery , “Auto Refresh Web Page With AJAX Technique” ,

Pada artikel ini kita akan membuat 2 buah tipe Refresh.

Refresh Kontent Otomatis dengan Data dari database
Refresh Otomatis Untuk mendapatkan Nilai Random / Acak

OK.. langsung saja.. untuk yang pertama

Refresh Kontent Otomatis Dengan JQuery

Demo Download

Di sini kita akan membuat file index.php. File ini adalah tempat kita menyimpan script dimana kita akan melakukan refresh konten otomatis dengan jQuery. Pada file ini kita akan memanggil file show.php secara realtime dengan durasi setiap 10 detik sekali tanpa harus melakukan refresh halaman, jadi hanya elemen tertentu saja yang di refresh ulang.

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Alert Box atau Pesan notifikasi dengan CSS3</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Author" content="Senterwebs">
    <link rel="shortcut icon" href="https://senterwebs.com/favicon.png">
    <link rel="icon" href="https://senterwebs.com/favicon.png">
    <style>
   @import url(http://fonts.googleapis.com/css?family=Bree+Serif);
    .wrapper{width:500px;margin:0 auto;}
    body {
        background-color: #1FAFC7;
        color:#fff;
        
      }
      a {
        font-weight: bold;
        text-align: center;

      }
      h3,h2,h1 {font-family: 'Bree Serif', 'serif';color:#FFF;text-align: center;}
      h1 {
        margin-top: 60px;
        font-size:50px;
        }
      h2{ margin-top:30px;
        font-size:40px;}
      </style>
<script src="jquery-1.3.2.min.js"></script>
<script>
 $(document).ready(function() {
      $("#responsecontainer").load("response.php");
   var refreshId = setInterval(function() 
      {
      $("#responsecontainer").load('response.php?randval='+ Math.random());
      }, 1000);
                               });
</script>
</head>
<body>
<div class="wrapper">
  <h2>Membuat Auto Refresh di Website dengan Jquery</h2>
<center><a href='https://senterwebs.com/artikel-369/membuat-auto-refresh-di-website-dengan-jquery.html'>Back to article senterwebs.com</a></center>

<h2><div id="responsecontainer"></div></h2>

</div>
</body>
</html>

response.php

<?php echo rand(); ?>

Membuat Refresh Halaman Web Otomtis dengan Javascript Jquery

Dalam kondisi tertentu kita membutuhkan cara untuk Refresh Halaman Secara Otomatis / auto, Hal ini bisa dilakukan dengan berbagai tehnik, jik pada manual nya kita bisa menekan dengan Tombol F5 pada keyboard, namun bagaimana jika kita ingin membuat halaman website bisa ter refresh/ load secara otomatis

Pada tulisan kali ini kita akan membuat sebuah halaman web sederhana dengan menampilkan data atau nilai acak yang terus berubah secara kontiniu tanpa harus kita refresh (load) pada halaman web tersebut. Fungsi yang menampilkan nilai acak tersebut menggunakan fungsi pada PHP yaitu rand() —> get random value.

Berikut ini script yang digunakan :

<html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function()
{
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 1000);
});
</script>
</head>
<body>
<center><br /><br /><br />
<table border="1" bgcolor="yellow"><tr><td>
<div id="responsecontainer"></div>
</td></tr></table>
</center>
</body>
</html>