In this tutorial, learn how to refresh a page on button click using jQuery or javascript. The short answer is to use the location.reload()
function for both jQuery and Javascript.
Create a simple page refresh or reload the page after a time delay in seconds using jQuery.The page refresh may require After you update the content of a page, you may require to refresh the page to get updated data.
Let’s find out how to refresh a page with the examples given below.
How to Refresh Page Using jQuery
To refresh a page on a button click using jQuery, you have to use location.reload()
function. It requires no argument to refresh the page on a button click.
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $('.btnRefreshjquery').click(function(){ location.reload(); }); }); </script> <button type="button" class="btnRefreshjquery">Refresh with jQuery</button> |
Output
The above example contains the button and the script to refresh the page. When you click the above button, the page will get refreshed immediately.
However, if you want to refresh the page after some seconds, please read further.
How to Refresh a Page Using Javascript
If you want to refresh your page using javascript, you have to used the same location.reload()
function which you have used in the previous example. You can create a function that contains the location.reload()
function. After that, you can use the function to call in onclick
attribute.
See the example given below to learn the method of Javascript.
1 2 3 4 5 6 |
<script> function myReload(){ location.reload(); } </script> <button type="button" onclick="myReload()">Refresh with Javascript</button> |
Output
You have to click the button given above to refresh the page immediately using javascript. It executes the function defined above on a button click.
If you want to refresh the page after some time delay in seconds, please read further.
Add Time Delay in Seconds to Reload Pages
To reload the page after some time delay on the button click, you have to use the setTimeout()
function of jQuery. You can define the time delay within the function with the code location.reload()
to reload the page on a button click.
The time delay value will be in milliseconds to reload the page after a certain time delay.
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">Refresh with Delay in Seconds</button> |
Output
The above example contains the button that you have to click to reload the page on button 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 to 5 seconds for the above example. Replace the time delay given above as per your requirement.
You May Also Like to Read
- how to redirect to another page using jQuery
- Show hide image on scroll down or up with jQuery
- Get the current page URL on the button click in jQuery
- How to smooth scroll to the top of the page with jQuery
I hope you like this tutorial on how to refresh a page on a button click using jQuery or javascript.