Implementing Auto Load and Refresh Div every 10 Seconds using jQuery.
💻 coding

Implementing Auto Load and Refresh Div every 10 Seconds using jQuery.

1 min read 202 words
1 min read
ShareWhatsAppPost on X
  • 1The article explains how to implement auto-refresh functionality for a div using jQuery and Ajax every 10 seconds.
  • 2It provides code examples for both HTML and PHP files to dynamically load content from the database.
  • 3The implementation requires a database connection and a query to count specific records based on user input.

AI-generated summary · May not capture all nuances

Key Insight
AskGif

"The article explains how to implement auto-refresh functionality for a div using jQuery and Ajax every 10 seconds."

Implementing Auto Load and Refresh Div every 10 Seconds using jQuery.

Have you seen this Twitter Search and Facebook shows most recent tweets/posts count from the database every 10 seconds on top of the page. I had developed like this with jQuery and Ajax. It's simple just 5 lines of code

Example 1

Index.html

Contains javascript and HTML code. Take a look at load("record_cound.php")

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

<body>
<div id="load_tweets"> </div>
</body>

</script>

record_count.php

Just printing "AskGif | programming" every 10 seconds

<?php
echo "AskGif | Programming blog..............";
?>

Example 2

index.php

Contains PHP code you have to pass the search box value twitter.com/search?q="some thing" to $search_word in facebook pass the user id or user session value

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('record_count.php?q=<?php echo $search_word; ?>').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

<body>
<div id="load_tweets"> </div>
</body>

</script>

record_count.php

Counting tweets/posts from the database

<?php
include("db.php");
$search_word=$_GET['q'];
$sql = mysqli_query($db,"Select id form Messages where message
LIKE '%$search_word%'");
$record_count=mysqli_num_rows($sql);
//Display count.........
echo $record_count;
?>

db.php

Database configuration file, modify username, password and database values

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Enjoyed this article?

Share it with someone who'd find it useful.

ShareWhatsAppPost on X

AskGif

Published on 24 September 2019 · 1 min read · 202 words

Part of AskGif Blog · coding

You might also like