Introduction
Let’s discover a elementary job in net growth: refreshing an internet web page. However we’re not speaking in regards to the basic 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 if you want a “exhausting” refresh.
Why Programmatically Refresh a Web page?
There are numerous instances the place this could possibly be helpful. For example, you may need to robotically reload a web page when a sure occasion happens, or refresh a web page after a selected interval to fetch the most recent 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 motive, you do not have asynchronous updates by way of AJAX.
Refreshing a Web page with Plain JS
Let’s begin with plain outdated JavaScript. The best approach to refresh a web page utilizing JavaScript is by utilizing 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 might be reloaded. It is so simple as that! However keep in mind, it will refresh all the web page which suggests any unsaved adjustments within the type inputs might be misplaced.
Observe: 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 remember that location.reload(true) and location.reload() behave otherwise!
Refreshing a Web page with jQuery
Subsequent up, let’s have a look at how one can refresh a web page utilizing jQuery. jQuery does not have a built-in methodology for web page refresh, nevertheless it’s straightforward 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 an alternative leverage a few of its occasions to know when to refresh. For instance:
$("#refresh-button").click on(operate() {
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 internet web page, a number of frequent errors could happen. Let’s check out a couple 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 = operate() {
location.reload();
}
To keep away from this, guarantee you have 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() isn’t a operate
This error happens if you try and name the location.reload() methodology on an object that does not have it. For example, in the event you mistakenly name location.reload() on a jQuery object, you will run into this error.
$('#myDiv').location.reload(); // Uncaught TypeError: $(...).location isn't a operate
To repair this, make sure you’re calling location.reload() on the right object, which is the window or location object.
window.location.reload(); // Right utilization
Conclusion
On this Byte, we have lined how one can refresh a web page utilizing JavaScript and jQuery. We have additionally checked out some frequent errors that will happen when refreshing a web page and how one can repair them. Simply keep in mind, refreshing a web page will trigger any unsaved adjustments to be misplaced, and it isn’t at all times a great expertise for the person, so use it sparingly.
