Refresh or Reload a Page using JQuery.

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
<html>
<head>
    <title>Refresh or Reload a Page Using JQuery</title>
    <script src="http://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>

The Script
<script> type="text/javascript">

    $(document).ready(function() {
        $('#btReload').click(function () {
            location.reload(true); 
        });    // RELOAD PAGE ON BUTTON CLICK EVENT.

        // SET AUTOMATIC PAGE RELOAD TIME TO 5000 MILISECONDS (5 SECONDS).
        setInterval('refreshPage()', 5000);
    });

    function refreshPage() { location.reload(); }

</script>
</html>

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.

Tweet this article Facebook Google+
comments powered by Disqus

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