In this article, I will show how to implement page refresh or
reload with JQuery.
If you are complete new to JQuery, Then refer the JQuery Quick Start
This gives you basic understanding of JQuery.
With reload() method of location object in JQuery, we can reload the current
document or page.
Syntax of reload() method is,
location.reload(forceGet);
This method is expecting one boolean argument,
default values is false.
If we pass false – then the page will be reloaded with
the values from the cache.
If we pass true – then re-load from the server.
on “ClickMe To Refresh The Page” button on-click event, we are calling
location.reload() method.
Complete source code is Here,
jquery_page_refresh.html
<html>
<head>
<title>JQuery to refresh or re-load a page</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
displayClock()
});
function myFunction() {
location.reload();
}
function displayClock() {
$("#clock").html("CLOCK");
var fireFox = navigator.userAgent.search("Firefox");
var iE6 = navigator.userAgent.search("MSIE 6.*");
var iE7 = navigator.userAgent.search("MSIE 7.*");
var iE8 = navigator.userAgent.search("MSIE 8.*");
var iE10 = navigator.userAgent.search("MSIE 10.*");
var iE11 = navigator.userAgent.match(/Trident.*rv[ :]*11./);
var currentTime = new Date();
//hack for IE 8 and IE 7, Date.parse only works when time stamp is separated by '/' instead of '-' and 'T' is removed
//so convert 2012-06-24T17:00:00-07:00 to 2012/06/24T17:00:00/07:00
if (iE8 != -1 || iE7 != -1 || iE6 != -1) {
currentTime = new Date(window.timestamp.replace(/-/ig, '/').replace(/T/, ' ').split('.')[0]);
}
//time zone offset
var timezone = currentTime.getTimezoneOffset() * 60000;
var time = currentTime.getTime() + timezone;
//If the browser is different from IE10, IE11 and Firefox, then we need to add the time zone difference.
if (fireFox == -1 && iE10 == -1 && iE8 == -1 && iE7 == -1 && iE6 == -1 && iE11 == null) {
currentTime = new Date(time);
}
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds;
$("#clock").html(currentTimeString);
}
</script>
</head>
<body>
<button id="pageRefresh" onclick="myFunction()">ClickMe To Refresh The Page</button>
</br> </br>
<div id="clock" class="clock"/>
</body>
</html>
Open the page in browser,
Click on the button “ClickMe To Refresh The Page”,
*** Venkat – Happy leaning ****