Introduction
Let’s discover a elementary activity in net improvement: refreshing an internet web page. However we’re not speaking in regards to the traditional F5 or CTRL+R right here. We’re as an alternative going to be utilizing JavaScript and jQuery to programmatically refresh a web page. It is a useful trick for once you want a “exhausting” refresh.
Why Programmatically Refresh a Web page?
There are numerous instances the place this may very well be helpful. For 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 knowledge from the server. That is notably helpful in dynamic functions the place content material updates continuously (like a dwell information feed or a real-time dashboard), however for no matter purpose, you do not have asynchronous updates through AJAX.
Refreshing a Web page with Plain JS
Let’s begin with plain previous JavaScript. The best technique to refresh a web page utilizing JavaScript is through the use of the location.reload() technique. Which can be utilized with simply this one technique 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 entire web page which suggests any unsaved adjustments within the kind inputs will likely be misplaced.
Word: There is a slight twist to the location.reload() technique. 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 remember that location.reload(true) and location.reload() behave in another way!
Refreshing a Web page with jQuery
Subsequent up, let’s examine tips on how to refresh a web page utilizing jQuery. jQuery does not have a built-in technique for web page refresh, nevertheless it’s straightforward to do it by leveraging the JavaScript location.reload() technique.
Whereas jQuery does not even have a built-in technique to do a web page refresh, we are able to as an alternative 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 How you can Repair Them
When working with JavaScript or jQuery to refresh an internet web page, a number of frequent errors could 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. Because the refresh command reloads the web page, it will get caught in an infinite loop of refreshes.
// This can trigger an infinite loop of web page refreshes
window.onload = perform() {
location.reload();
}
To keep away from this, guarantee you’ve got a situation that may break the loop.
// This can refresh the web page solely as soon as
if (!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
Uncaught TypeError: location.reload() shouldn’t be a perform
This error happens once you try and name the location.reload() technique on an object that does not have it. For example, should you mistakenly name location.reload() on a jQuery object, you may run into this error.
$('#myDiv').location.reload(); // Uncaught TypeError: $(...).location shouldn't 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(); // Appropriate utilization
Conclusion
On this Byte, we have lined tips on how to refresh a web page utilizing JavaScript and jQuery. We have additionally checked out some frequent errors which will happen when refreshing a web page and tips on how to repair them. Simply bear in mind, refreshing a web page will trigger any unsaved adjustments to be misplaced, and it is not all the time expertise for the person, so use it sparingly.
