How to reload/refresh a page using JavaScript and jQuery

JavaScript provides several ways to reload or refresh an HTML page but the standard way to do this job is by using window.location object. This object provides a reload() method which instructs the browser to reload the page. The browser can do it from its cache or from the server, which depends upon optional parameter i.e. reload(true) will reload the page from the server but reload(false) will only reload the page from browser's cache, which may or may not represent the current version at the server.

You can combine both jQuery and JavaScript to wrap the page refresh code as shown in our example. Btw, this is not the only way to refresh a page in JavaScript, you can also use history.go(0) and location.replcace(locatoin.pathname) to reload the page.

And, If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy. It's one of the best and hand-son course to learn ES 6 and other new Javascript features.

JavaScript and jQuery example to reload a page 

In this example, I will tell you how to reload a page from both the server and browser's cache using jQuery and JavaScript. In our HTML we have two buttons, one for reloading page from the server and other from refresh page from browser's cache. Though location.reload() will work in all browsers, you can also use jQuery to wrap other code e.g. attaching a click handler to the two buttons.

Here is the full example for your reference:

<title>How to reload/refresh a page using jQuery</title>


<h2>Reloading a page using jQuery and JavaScript</h2>

<button id="btn_reload">Reload from Server</button>
<button id="btn_refresh">Reload from Browser's cache</button>

<script src="//"></script>
$(document).ready(function() {

location.reload(false); //loads from browser's cache 


location.reload(true); //loads from server




That's all about how to reload or refresh a page in jQuery using JavaScript. Just remember that window.location.reload() will instruct the browser to reload the page, which means downloading data from the server, parsing, and displaying it. You can also reload a page from the browser's cache by using the location.reload(false) method. You can read more about jQuery methods on jQuery in Action book, one of the best resources to learn and use jQuery in real-world projects.

Other jQuery articles for you
  • 5 Books to learn jQuery for Web developers (books)
  • How to get the current URL, Parameters, and Hash using jQuery? (solution)
  • jQuery Hello World Example (program)
  • How to use more than one jQuery UI DatePicker on the JSP page? (example)
  • How to create tab-based UI using jQuery? (example)
  • How to modify more than one element in one line? (example)
  • How to redirect a page URL using jQuery and JavaScript? (solution)
  • How to write HelloWorld in jQuery? (solution)
  • 20 jQuery Interview Questions for Java Web Developers (list)
  • How to load jQuery on a web page? (solution)

Further Reading
The Complete jQuery Course: From Beginner To Advanced!
Up and Running with jQuery
jQuery Fundamentals By Dan Wahlin

Thanks for reading this article. If you like this tutorial then please share with your friends and colleagues. If you have any question or feedback then please drop a comment. 

No comments :

Post a Comment