Contents
If you need to reload the page in JavaScript, there are a few ways to do it. Here’s how to do it with vanilla JavaScript, jQuery, and React.
Checkout this video:
Introduction
Despite of having the real time feature, there are still some situations where you want to refresh or reload the page. For instance, when dealing with the pagination, it will be more user-friendly if the page can be automatically reloaded when a user clicks on a certain page number. In this article, we will show you how to reload/refresh the page using JavaScript.
Assuming that you have a button with an id of “reload-page” in your HTML, the following code shows how to reload the page when this button is clicked:
“`javascript
document.getElementById(“reload-page”).addEventListener(“click”, function(){
window.location.reload();
});
“`
The location.reload() Method
The location.reload() method is used to reload the current document.
Syntax:
location.reload(forceReload);
Parameters: This method accepts a single parameter as mentioned above and described below:
forceReload: It is an optional parameter. If it is set to true, then the page will be reloaded from the server. If it is false or not specified, then the browser will reload the page from its cache.
The location.href Property
You can use the location.href property to reload and redirect pages.
The location.href property returns the URL of the current page.
The location.href property is used to get or set the href (URL) attribute of a page, maximizing compatibility with different browsers.
If you want to refresh the page, you can use the location.reload method:
The following code will refresh the current page from the server (without using the cache):
The location.assign() Method
JavaScript provides several ways to reload or refresh an HTML page automatically. The most common way to refresh webpages using JavaScript is to use the reload method. You will learn 3 different ways to call this method.
The location.assign() method loads a new document from the specified URL. The difference between this method and the assign () method is that when using assign (), the browser loads a new document, which Replacement of the previous document in the browser’s session history. When you use replace (), the previous URL in your browser’s session history does not get updated, meaning you can’t go back to previous pages if you click on your browser’s Back button.
The syntax for this method is:
location.assign(URL)
Where URL is the URL of the new page you want to load. For example, to load a page called newpage.html from the same directory as the current page, you would use:
location.assign(“newpage.html”)
Conclusion
You’ve now seen two methods that can be used to reload the current page using vanilla JavaScript. The first method uses the window.location.reload() method, and the second method uses the location.reload() method.
Both of these methods work by making a GET request to the current page, which will automatically trigger a reload. If you need to make a POST request instead of a GET request, you can use the XMLHttpRequest API to make an AJAX call.
