In this tutorial, learn how to refresh a page on button click using jQuery or javascript. Create simple page refresh or refresh the page after a time delay in seconds with jQuery.
The page refresh may require sometime when you update content and show the result. The result will be displayed after you refresh the page on button click. You may also like to read how to redirect to another page using jQuery.
How to Refresh a Page Using jQuery
To refresh a page on button click using jQuery, you have to use location.reload(). This refresh the page with the jQuery click event of the button.
1 2 3 4 5 6 7 8 | <script> $(document).ready(function(){ $('.btnRefreshjquery').click(function(){ location.reload(); }); }); </script> <button type="button" class="btnRefreshjquery btn btn-primary">Refresh with jQuery</button> |
Output
The above example contains the button and the script to refresh the page. Click the above button to refresh a page using jQuery. This performs a refresh of the page immediately on click of the button.
However, if you want to refresh the page after some seconds, please read further.
Refresh a Page Using Javascript
In addition to the above jQuery method, you can also refresh a page using javascript. This requires a function which contains the code location.reload();. The example contains the button with the onclick event.
The onclick attribute contains the function for the page refresh.
1 2 3 4 5 6 | <script> function myReload(){ location.reload(); } </script> <button type="button" onclick="myReload()" class="btn btn-primary">Refresh with Javascript</button> |
Output
Click the above button to refresh the page immediately using javascript. The function given above executes on click of the button element.
If you want to refresh the page after some time delay in seconds, please read further.
Add Time Delay in Seconds For Page Refresh Using jQuery
To refresh the page after some time delay on the button click. You have to use the setTimeout() of jQuery to add a time delay. It also contains the code location.reload() to execute on button click.
1 2 3 4 5 6 7 8 9 10 | <script> $(document).ready(function(){ $('.btnRefreshdelay').click(function(){ setTimeout(function(){ location.reload(); }, 5000); }); }); </script> <button type="button" class="btnRefreshdelay btn btn-primary">Refresh with Delay in Seconds</button> |
Output
The above example contains the button which refreshes the page on click. It takes 5 seconds after which the page refresh code executes to refresh a page. This is useful to execute your code and refresh the page after some time delay.
You can change the time delay of 5 seconds for the above example. Replace the time delay given above as per your requirement.
- Show hide image on scroll down or up with jQuery
- Get current page URL on button click in jQuery
- How to smooth scroll to the top of the page with jQuery
Hope, you like the tutorial of how to refresh a page on button click using jQuery or javascript. If you have any query regarding the tutorial, please comment below.
Also tell me, which method are you using to refresh the page with the delay or without.