JQuery - Automatically Refresh or Reload a Page Example

Jquery

Nicesnippets

10134

07-04-2021


JQuery - Automatically Refresh or Reload a Page Example

Hello Friends,

Now let's see example of how to automatically refresh page using jquery. We will talk about automatically reload a page using jquery. We will auto reload page using setTimeout(), setInterval() and meta http-equiv tag. we can simple do it in php, .net, java, laravel, codeigniter etc.

Sometimes, we require to reload page after every 5 seconds, 10 seconds, 15 seconds, 20 seconds, 25 seconds, 30 seconds etc. In this post i will explain how to do it and there are many way to refresh html page. So here you will see three example of auto refresh php page using javascript, you can also manually interval time of page refresh. So let's see bellow examples:

Here I will give you three example for how to automatically refresh page using jquery. So let's see the bellow example:

Example 1(Using setTimeout)


<html lang="en">

<head>

<title>Page Reload after 10 seconds - NiceSnippets.com</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

</head>

<body>

<h2>Hello, I am NiceSnippets.com</h2>

<script type="text/javascript">

setTimeout(function(){

location.reload();

},15000);

</script>

</body>

</html>

Example 2(Using setInterval)

<html lang="en">

<head>

<title>Page Reload after 10 seconds - NiceSnippets.com</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

</head>

<body>

<h2>Hello, I am NiceSnippets.com</h2>

<script type="text/javascript">

function autoRefreshPage()

{

window.location = window.location.href;

}

setInterval('autoRefreshPage()', 15000);

</script>

</body>

</html>

Example 3(Using meta)

<html lang="en">

<head>

<title>Page Reload after 10 seconds - NiceSnippets.com</title>

<meta http-equiv="refresh" content="10" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

</head>

<body>

<h2>Hello, I am NiceSnippets.com</h2>

</body>

</html>

It will help you....


Recommended Posts