Hello guys, if you are wondering how to reload or refresh a web page then don't worry 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 the 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.
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 the server and browser's cache using jQuery and JavaScript. In our HTML we have two buttons, one for reloading pages from the server and the other for the refresh page from the browser's cache.Though location.reload() will work in all browsers, you can also use jQuery to wrap other code like attaching a click handler to the two buttons. And, if you are interested to learn more these free jQuery courses are also great resources.
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 the browser's cache by using the location.reload(false) method. You can read more about jQuery methods by joining these online jQuery courses for beginners, 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)
- How to modify multiple elements in one go? (jquery tutorial)
- How to find all unchecked checkbox in jQuery? (tutorial)
- 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 use more than one jQuery UI DatePicker on the JSP page? (example)
- How to check/uncheck checkboxes in jQuery? (tutorial)
- How to redirect a page URL using jQuery and JavaScript? (solution)
- 20 jQuery Interview Questions for Java Web Developers (list)
- How to load jQuery on a web page? (solution)
Thanks for reading this article. If you like this tutorial then please share it with your friends and colleagues. If you have any questions or feedback then please drop a comment.
No comments :
Post a Comment