Refreshing a webpage by jQuery or JavaScript
A webpage can be refreshed by using different ways by using jQuery or JavaScript.
For example, you may use location.reload method to refresh a page from the browser cache or server side. See the section below for live demos of using location.reload and other ways.
An example of jQuery refresh from browser cache
The location.reload method takes a parameter which is a Boolean.
If set as true, the page will be forced to refresh from the server. The default value is false which may refresh the page from the browser cache.
As you click the button by using the code below, it will reload the page by using location.reload default value:
The code to refresh the webpage:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<body>
<div class="container">
<button type="button" id="reloadpage" class="btn btn-primary">Reload web page from cache</button>
</div>
<script>
$('#reloadpage').click(function() {
location.reload();
});
</script>
</body>
</html>
A demo of loading from the server side
In this example, the true value is passed to the location.reload as using jQuery. Again, click the button to reload the webpage from the server:
Complete code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<body>
<div class="container">
<button type="button" id="reloadpage" class="btn btn-danger">Reload web page from server</button>
</div>
<script>
$('#reloadpage').click(function() {
location.reload(true);
});
</script>
</body>
</html>
Following jQuery code is used:
<script>
$('#reloadpage').click(function() {
location.reload(true);
});
</script>
Refreshing the page by JavaScript
If you are not a fan of jQuery or not using jQuery in your web project, then you may do the same by using JavaScript.
See the following example for refreshing the webpage by using the window.location.reload attribute which is placed in JavaScript code. The code is invoked as you click the button:
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript">
function refreshPage()
{
window.location.reload(true);
}
</script>
</head>
<body>
<div class="container">
<button type="button" id="reloadpage" class="btn btn-success btn-lg" onclick="refreshPage()">Reload by JavaScript</button>
</div>
</body>
</html>
The JavaScript and markup for reloading the webpage:
<script type="text/javascript">
function refreshPage()
{
window.location.reload(true);
}
</script>
Automatically refreshing the webpage without clicking the button
In all above examples, the page is refreshed as you click the button. In certain scenarios, you may need to refresh the webpage after a certain interval.
For that, you may use the setTimeout where you may specify when to execute the function containing refresh code.
In that way, the page will be refreshed automatically after a specified interval.
For the demo, I have set the interval as five seconds, have a look:
The code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript">
window.setTimeout('refreshPage()', 5000);
function refreshPage()
{
window.location.reload();
}
</script>
</head>
<body>
<body>
<div class="container">
<p class="alert alert-success">The page will refresh in five seconds!</p>
</div>
</body>
</html>
What if a page to be refreshed is loaded by post method?
If the current page is intended to reload by using a button or automatically is opened by post method, then location.reload will result in a prompt message.
For example, if a user is taken to a page after a form is submitted where the form uses the Post method, then the above examples will throw an alert before refreshing the page.
To avoid that, you may use the window.location.pathname as shown in the code below:
Complete Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript">
window.setTimeout('refreshPage()', 5000);
function refreshPage()
{
window.location = window.location.pathname;
}
</script>
</head>
<body>
<body>
<div class="container">
<p class="alert alert-danger">Auto Refresh with Post method</p>
</div>
</body>
</html>
This JavaScript code is used:
<script type="text/javascript">
window.setTimeout('refreshPage()', 5000);
function refreshPage()
{
window.location = window.location.pathname;
}
</script>
You should only use this technique for the pages loaded after post method and it will also remove the query string as in the demo.