Introduction
Let’s discover a basic activity in net improvement: refreshing an online web page. However we’re not speaking in regards to the traditional F5 or CTRL+R right here. We’re as a substitute going to be utilizing JavaScript and jQuery to programmatically refresh a web page. It is a helpful trick for whenever you want a “laborious” refresh.
Why Programmatically Refresh a Web page?
There are numerous occasions the place this may very well be useful. As an example, you would possibly wish to routinely reload a web page when a sure occasion happens, or refresh a web page after a selected interval to fetch the newest information from the server. That is significantly helpful in dynamic purposes the place content material updates steadily (like a dwell information feed or a real-time dashboard), however for no matter purpose, you do not have asynchronous updates by way of AJAX.
Refreshing a Web page with Plain JS
Let’s begin with plain previous JavaScript. The best approach to refresh a web page utilizing JavaScript is through the use of the location.reload() methodology. Which can be utilized with simply this one methodology name:
location.reload();
When this code is executed, the present web page will likely be reloaded. It is so simple as that! However bear in mind, this can refresh your complete web page which suggests any unsaved modifications within the kind inputs will likely be misplaced.
Word: There is a slight twist to the location.reload() methodology. It accepts a Boolean parameter. When set to true, it causes a tough reload from the server. When set to false or left undefined, it performs a gentle reload from the browser cache. So, simply bear in mind that location.reload(true) and location.reload() behave otherwise!
Refreshing a Web page with jQuery
Subsequent up, let’s have a look at easy methods to refresh a web page utilizing jQuery. jQuery does not have a built-in methodology for web page refresh, nevertheless it’s simple to do it by leveraging the JavaScript location.reload() methodology.
Whereas jQuery does not even have a built-in methodology to do a web page refresh, we will as a substitute leverage a few of its occasions to know when to refresh. For instance:
$("#refresh-button").click on(perform() {
location.reload();
});
Right here we’re refreshing the web page when the person clicks our “frefresh button”.
Widespread Errors and The right way to Repair Them
When working with JavaScript or jQuery to refresh an online web page, a number of widespread errors might happen. Let’s check out a number of of them and their options.
Infinite Loop of Web page Refreshes
This occurs when the web page refresh code is positioned in a location the place it will get executed each time the web page masses. For the reason that refresh command reloads the web page, it will get caught in an infinite loop of refreshes.
// It will trigger an infinite loop of web page refreshes
window.onload = perform() {
location.reload();
}
To keep away from this, guarantee you could have a situation that may break the loop.
// It will refresh the web page solely as soon as
if (!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
Uncaught TypeError: location.reload() will not be a perform
This error happens whenever you try to name the location.reload() methodology on an object that does not have it. As an example, should you mistakenly name location.reload() on a jQuery object, you will run into this error.
$('#myDiv').location.reload(); // Uncaught TypeError: $(...).location will not be a perform
To repair this, make sure you’re calling location.reload() on the proper object, which is the window or location object.
window.location.reload(); // Right utilization
Conclusion
On this Byte, we have lined easy methods to refresh a web page utilizing JavaScript and jQuery. We have additionally checked out some widespread errors which will happen when refreshing a web page and easy methods to repair them. Simply bear in mind, refreshing a web page will trigger any unsaved modifications to be misplaced, and it is not at all times a very good expertise for the person, so use it sparingly.
