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 that may refresh the page from the browser cache.
As you click the button in the demo page, it will reload the page by using location.reload default value:
See online demo and code
The code to refresh the webpage:
<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>
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:
See online demo and code
The jQuery code:
<script>
$('#reloadpage').click(function() {
location.reload(true);
});
</script>
Refreshing the page by JavaScript
If you are not the 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:
See online demo and code
The JavaScript and markup for reloading the webpage:
<script type="text/javascript">
function refreshPage()
{
window.location.reload(true);
}
</script>
The Markup:
<div class="container"> <button type="button" id="reloadpage" class="btn btn-success btn-lg" onclick="refreshPage()">Reload by JavaScript</button> </div>
Note: you may also use the location.reload rather than window.location.reload to refresh the page.
In all above examples, the page is refreshed as you clicked 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 specified interval.
For the demo, I have set the interval as five seconds, have a look:
See online demo and code
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 that 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 form used the Post method, then above examples will throw an alert before refreshing the page.
For avoiding that, you may use the window.location.pathname as shown in the demo below:
See online demo and code
The JavaScript code:
<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.