Here in this article I am going to show two different methods for refreshing or reloading a page. In the first method, I’ll use a button control and its click event to trigger the page refresh. This is a manual process.
In the second method, I’ll use a timer to trigger refreshing or reloading a page. This is an automatic process.
To achieve this I am using the location.reload() method inside the $(document).ready() function. I have written scripts one each for manual process and for automatic process.
Method location.reload() accepts a Boolean value forceGet, which can be either true or false. Setting location.reload(true); ensures that the current page is fully loaded ignoring the cache.
The jQuery $(document).ready(function() {}) ensures that the entire page is fully loaded before any event is handled.
Manually Refresh or Reload Page with Button Click
In the first method, the page will refresh or reload when a user clicks the button.
<html>
<head>
<title>Refresh or Reload a Page Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div><input id="btReload" type="button" value="Reload Page" /></div>
</body>
<script>
$(document).ready(function() {
$('#btReload').click(function () {
location.reload(true);
}); // Reload page on button click.
});
</script>
</html>How to auto refresh page Every 10 seconds using JavaScript
Automatically Refresh or Reload Page using SetInterval() Method
In the second example, I am using the SetInterval() method to call the .reload() function.
<script>
$(document).ready(function() {
// Call refresh page function after 5000 milliseconds (or 5 seconds).
setInterval('refreshPage()', 5000);
});
function refreshPage() {
location.reload();
}
</script>The automatic Reloading of the page will be triggered using the setInterval() method. This method takes two parameters. The first parameter is a function, which has the code to refresh or reload the page. The second parameter is a time interval (5000 milliseconds), which will call the function repeatedly.
How to refresh the contents in a <div> element withoug reloading the entire page using ...
Hope you find this article and its example useful. Thanks for reading.