Automatically Refresh or Reload Page using jQuery
To automatically refresh or reload a page using jQuery use the setInterval() function to execute a JavaScript function at regular intervals. In this case, the function will be responsible for reloading the page.
Here’s an example of how to automatically refresh a page every 5 seconds using jQuery:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Auto Refresh Page</title>
</head>
<body>
<h1>Page Content</h1>
<p>This is some content on the page.</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>JavaScript (script.js):
$(document).ready(function() {
const refreshInterval = 5000; // 5 seconds (5000 milliseconds)
// Function to reload the page
function reloadPage() {
location.reload();
}
// Set interval to call reloadPage function every refreshInterval milliseconds
setInterval(reloadPage, refreshInterval);
});In this example, we use jQuery to execute the reloadPage() function every 5 seconds (5000 milliseconds) using the setInterval() function. The reloadPage() function simply calls location.reload() to refresh the page.
When you open the HTML file in your browser, the page will automatically refresh every 5 seconds. You can adjust the refreshInterval variable to control how frequently you want the page to refresh. Note that automatic page refreshes can disrupt user interaction, so use this feature judiciously and ensure that it aligns with your application’s requirements.