Automatically Refresh or Reload a Page using jQuery or Reload a Page with a Button Click

Many a times we need to Refresh or Reload an active web page or the web pages we embed inside the parent page. The active page or the embedded pages can be refreshed or reloaded either manually or automatically using jQuery.

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 JavaScript’s “location.reload()” method inside the jQuery $(document).ready() function. I have written the scripts each for manual and automatic inside the “.ready()” function.

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.

The Markup
    <title>Refresh or Reload a Page Using jQuery</title>
    <script src=""></script>
    <div><input id="btReload" type="button" value="Reload Page" /></div>

Manually Refresh or Reload Page with Button Click

In the first method, the page will refresh or reload when a user clicks the button. In the above markup, I have added a <input> element of type button. The click event will trigger the page reload.

The Script
<script> type="text/javascript">
    $(document).ready(function() {
        $('#btReload').click(function () {

Automatically Refresh or Reload Page using SetInterval() Method

In the second method, I am using the SetInterval() method to call the .reload() function.

<script> type="text/javascript">
    $(document).ready(function() {
        setInterval('refreshPage()', 5000);

    function refreshPage() { 

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, which will call the function repeatedly.

For the above demo, I have set the time as “5000” milliseconds or “5” seconds to be precise.

Hope you find this little article and its example useful. Don’t forget to leave a line below (in the comment section) if you have any suggestions.

Thanks for reading.

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!