How to Refresh/Reload a Page with jQuery/JS
The JavaScript reload() method is used to reload the current document in JavaScript/jQuery. The reload() method can reload the current resource . The method also has other perks, such as helping you get the URL address of the current page, redirect the browser to another page, refresh page etc.
location.reload()
The location.reload() method is standard javascript. You don't need jQuery for it. The reload() method takes an optional parameter . The parameter defaults to false, so by default the page may reload from the browser's cache . If we needed to pull the document from the web-server again (such as where the document contents change dynamically) we would pass the argument as true. This method is compatible with all major browsers , including IE, Chrome, Firefox, Safari, Opera.JavaScript window.location object can be used:
- Get current page address (URL)
- Redirect the browser to another page
- Reload/refresh the same page
Browser View
Refresh a page with jQuery/JavaScript new Date()
<!DOCTYPE html>
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
location.reload(true);
});
});
</script>
</head>
<h2>Refresh a page with jQuery/JavaScript new Date()</h2>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
<button type="button">Refresh/Reload page</button>
</body>
</html>
In jQuery/JavaScript, there are lots of ways reload/refresh a page:
history.go(0);
The History interface allows manipulation of the browser session history , that is the pages visited in the tab or frame that the current page is loaded in. The history.go() method loads a URL from the browsers history depending on the parameter passed to it. If the parameter passed is '0', it reloads the current page .
<script>
$(document).ready(function(){
$("button").click(function(){
history.go(0);
});
});
</script>
If the current page was loaded by a POST request , you may want to use
window.location = window.location.pathname;
jQuery/JavaScript example
<script>
$(document).ready(function(){
$("button").click(function(){
window.location = window.location.pathname;
});
});
</script>
There are multiple ways to Refresh/Reload a page with jQuery/JavaScript, some are:
- location.href = location.href
- location.replace(location.pathname)
- window.location = window.location
- window.self.window.self.window.window.location = window.location
Refresh a page after certain delay jQuery
The refresh code can be executed after a certain period of time using the setTimeout() method . This method has a delay parameter which denotes the time after which the function will execute. This value is given in milliseconds . The amount of time in seconds to be delayed in multiplied by 1000 to convert it to milliseconds.
setTimeout(location.reload.bind(location), 5000); //page will refresh after 5 seconds
jQuery/JavaScript Source
<!DOCTYPE html>
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
setTimeout(location.reload.bind(location), 5000);
});
});
</script>
</head>
<h2>Refresh a page with jQuery/JavaScript new Date()</h2>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
<button type="button">Refresh/Reload page</button>
</body>
</html>
The reload may be blocked and a SECURITY_ERROR DOMException thrown. This happens if the origin of the script calling location.reload() differs from the origin of the page that owns the Location object.
Related Topics