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.
jQuery Refresh/Reload Page

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:

  1. Get current page address (URL)
  2. Redirect the browser to another page
  3. Reload/refresh the same page
jQuery/JavaScript example
run this source code Browser View
Refresh a page with jQuery/JavaScript new Date()

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(){ 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:
  1. location.href = location.href
  2. location.replace(location.pathname)
  3. window.location = window.location
  4. window.self.window.self.window.window.location = window.location

Refresh a page after certain delay jQuery


JavaScript Reload/Refresh Page
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.