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