Sunday, July 16, 2017

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.


JavaScript and jQuery example to reload a page 

In this example, I will tell you how to reload a page from both 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 browser, 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:

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

<body>

<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="//code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {

$("#btn_refresh").click(function(){
location.reload(false); //loads from browser's cache 

});

$("#btn_reload").click(function(){
location.reload(true); //loads from server

});

});
</script>

</body>
</html>



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 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 current URL, Parameters, and Hash using jQuery? (solution)
  • jQuery Hello World Example (program)
  • How to use more than one jQuery UI DatePicker in 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 in a web page? (solution)


Further Reading

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